AngularJSlimitToフィルター
例
配列の最初の3つの項目のみを表示します。
<div ng-app="myApp" ng-controller="sizeCtrl">
<ul>
<li ng-repeat="x
in cars | limitTo : 3">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sizeCtrl',
function($scope) {
$scope.cars = ["Audi", "BMW",
"Dodge", "Fiat", "Ford", "Volvo"];
});
</script>
定義と使用法
フィルタはlimitTo、指定された数の要素のみを含む配列または文字列を返します。
フィルタを配列に使用するlimitToと、指定した数の項目のみを含む配列が返されます。
フィルタを文字列に使用するlimitToと、指定された文字数のみを含む文字列が返されます。
limitToフィルタを数値に使用すると、指定した桁数のみを含む文字列が返されます。
負の数を使用して、要素の先頭ではなく末尾から始まる要素を返します。
構文
{{ object | limitTo :
limit :
begin }}
パラメータ値
| Value | Description |
|---|---|
| limit | A number, specifying how many elements to return |
| begin | Optional. A number specifying where to begin the limitation. Default is 0 |
その他の例
例
配列の最後の3つの項目を表示します。
<div ng-app="myApp" ng-controller="sizeCtrl">
<ul>
<li ng-repeat="x
in cars | limitTo : -3">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sizeCtrl',
function($scope) {
$scope.cars = ["Audi", "BMW",
"Dodge", "Fiat", "Ford", "Volvo"];
});
</script>
例
位置1から始まる3つのアイテムを表示します。
<div ng-app="myApp" ng-controller="sizeCtrl">
<ul>
<li ng-repeat="x
in cars | limitTo : 3 : 1">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sizeCtrl',
function($scope) {
$scope.cars = ["Audi", "BMW",
"Dodge", "Fiat", "Ford", "Volvo"];
});
</script>
例
文字列の最初の3文字を表示します。
<div ng-app="myApp" ng-controller="sizeCtrl">
<h1>{{txt | limitTo :
3}}</h1>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('sizeCtrl', function($scope) {
$scope.txt = "Hello, welcome to AngularJS";
});
</script>
例
番号の最初の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>
関連ページ
AngularJSチュートリアル：Angularフィルター