limitTo

概要

指定した数の分だけを含む、新しい配列または文字列を作成します。 制限する値とサイン(+または-)が指定され、配列・文字列の先頭または末尾のいずれかから取得されます。

使用方法

filter:limitTo(input, limit);

引数

引数 説明
input

型:Arraystring

制限される元になる配列または文字列を指定します。

limit

型:stringnumber

返される配列または文字列の長さを指定します。 もし、制限する数値が正の数であれば、元となる配列/文字列の先頭から制限した数分の項目がコピーされます。 もし、制限する数値が負の数であれば、元となる配列/文字列の末尾から制限した数分の項目がコピーされます。 array.lengthを超えるような制限は取り除かれます。

戻り値 説明
 

型:Arraystring

制限された数分の、新しい部分配列または部分文字列になります。

デモ

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="Ctrl">
      Limit {{numbers}} to: <input type="integer" ng-model="numLimit">
      <p>Output numbers: {{ numbers | limitTo:numLimit }}</p>
      Limit {{letters}} to: <input type="integer" ng-model="letterLimit">
      <p>Output letters: {{ letters | limitTo:letterLimit }}</p>
    </div>
  </body>
</html>
function Ctrl($scope) {
  $scope.numbers = [1,2,3,4,5,6,7,8,9];
  $scope.letters = "abcdefghi";
  $scope.numLimit = 3;
  $scope.letterLimit = 3;
}
it('should limit the number array to first three items', function() {
  expect(element('.doc-example-live input[ng-model=numLimit]').val()).toBe('3');
  expect(element('.doc-example-live input[ng-model=letterLimit]').val()).toBe('3');
  expect(binding('numbers | limitTo:numLimit')).toEqual('[1,2,3]');
  expect(binding('letters | limitTo:letterLimit')).toEqual('abc');
});

it('should update the output when -3 is entered', function() {
  input('numLimit').enter(-3);
  input('letterLimit').enter(-3);
  expect(binding('numbers | limitTo:numLimit')).toEqual('[7,8,9]');
  expect(binding('letters | limitTo:letterLimit')).toEqual('ghi');
});

it('should not exceed the maximum size of input array', function() {
  input('numLimit').enter(100);
  input('letterLimit').enter(100);
  expect(binding('numbers | limitTo:numLimit')).toEqual('[1,2,3,4,5,6,7,8,9]');
  expect(binding('letters | limitTo:letterLimit')).toEqual('abcdefghi');
});
<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
<script>function Ctrl($scope) {
  $scope.numbers = [1,2,3,4,5,6,7,8,9];
  $scope.letters = "abcdefghi";
  $scope.numLimit = 3;
  $scope.letterLimit = 3;
}
</script>
  </head>
  <body>
    <div ng-controller="Ctrl">
      Limit {{numbers}} to: <input type="integer" ng-model="numLimit">
      <p>Output numbers: {{ numbers | limitTo:numLimit }}</p>
      Limit {{letters}} to: <input type="integer" ng-model="letterLimit">
      <p>Output letters: {{ letters | limitTo:letterLimit }}</p>
    </div>
  </body>
</html>

 Back to top

© 2017 Google
Licensed under the Creative Commons Attribution License 3.0.

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。