AngularJS limitTo 過濾器

定義和用法

limitTo 過濾器返回僅包含指定數量元素的數組或字符串。

當 limitTo 過濾器用于數組時，它返回一個僅包含指定數量項目的數組。

當 limitTo 過濾器用于字符串時，它返回一個僅包含指定數量字符的字符串。

當 limitTo 過濾器用于數字時，它返回一個僅包含指定位數的字符串。

使用負數返回從元素末尾開始的元素，而不是從開頭開始。

相關頁面

AngularJS 教程：Angular 過濾器

實例

例子 1

僅顯示數組的前三個元素：

<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>

親自試一試

例子 2

顯示數組的最后三個元素：

<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>

親自試一試

例子 3

從位置 1 開始顯示三個元素：

<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>

親自試一試

例子 4

顯示字符串的前三個字符：

<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>

親自試一試

例子 5

顯示數字的前三個數字：

<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>

親自試一試

語法

{{ object | limitTo : limit : begin }}

參數