AngularJS limitTo 过滤器
示例
仅显示数组的前三个项目
<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 }}
参数值
| 值 | 描述 |
|---|---|
| limit | 一个数字，指定要返回的元素数量 |
| begin | 可选。一个数字，指定限制的开始位置。默认值为 0 |
更多示例
示例
显示数组的最后三个项目
<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 开始
<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>
自己动手试一试 »
示例
显示字符串的前三个字符
<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>
自己动手试一试 »
示例
显示数字的前三个数字
<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 过滤器
