AngularJS limitTo フィルタ

定義と使用法

limitTo フィルタは指定された数の要素のみを含む配列または文字列を返します。

次に、 limitTo フィルタを配列に使用すると、指定された数の項目のみを含む配列が返されます。

次に、 limitTo フィルタを文字列に使用すると、指定された数の文字のみを含む文字列が返されます。

次に、 limitTo フィルタを数値に使用すると、指定された桁数のみを含む文字列が返されます。

負の数を使用して、要素の末尾から始まる要素を返すのではなく、先頭から始まる要素を返します。

関連ページ

AngularJS タイプ：Angular フィルタ

例

例1

配列の最初の3つの要素のみを表示：

数字の前3桁を表示します：
<ul>
<li ng-repeat="x in cars | limitTo : 3">{{x}}</li>
</ul>
<h1>{{phone | limitTo : 3}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
    $scope.cars = ["Audi", "BMW", "Dodge", "Fiat", "Ford", "Volvo"];
$scope.phone = "123456789";
);

</script>

例2

配列の最後の3つの要素を表示：

数字の前3桁を表示します：
<ul>
<li ng-repeat="x in cars | limitTo : -3">{{x}}</li>
</ul>
<h1>{{phone | limitTo : 3}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
    $scope.cars = ["Audi", "BMW", "Dodge", "Fiat", "Ford", "Volvo"];
$scope.phone = "123456789";
);

</script>

例3

位置1から始めて3つの要素を表示：

数字の前3桁を表示します：
<ul>
<li ng-repeat="x in cars | limitTo : 3 : 1">{{x}}</li>
</ul>
<h1>{{phone | limitTo : 3}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
    $scope.cars = ["Audi", "BMW", "Dodge", "Fiat", "Ford", "Volvo"];
$scope.phone = "123456789";
);

</script>

例4

表示文字的前三个字符：

数字の前3桁を表示します：
<h1>{{txt | limitTo : 3}}</h1>
<h1>{{phone | limitTo : 3}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
    $scope.txt = "Hello, welcome to AngularJS";
$scope.phone = "123456789";
);

</script>

例子 5

例 5

数字の前3桁を表示します：
<div ng-app="myApp" ng-controller="sizeCtrl">
<h1>{{phone | limitTo : 3}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sizeCtrl', function($scope) {
$scope.phone = "123456789";
);

</script>

実際に試してみる

文法 {{ オブジェクト 説明 | limitTo : 数字で、返す要素の数を指定します。 :

}}