最新のWeb開発のチュートリアル
 

AngularJS limitToフィルター


配列の最初の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チュートリアル: アンギュラフィルタ