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 = ["奥迪", "宝马", "道奇", "菲亚特", "福特", "沃尔沃"];
});
</script>
亲自试一试 »
定义和用法
该 limitTo 过滤器返回一个数组或一个字符串，其中仅包含指定数量的元素。
当 limitTo 过滤器用于数组时，它返回一个仅包含指定数量项目的数组。
当 limitTo 过滤器用于字符串时，它返回一个字符串，其中仅包含指定数量的字符。
当 limitTo 过滤器用于数字时，它返回一个字符串，其中仅包含指定数量的数字。
使用负数从元素的末尾而不是开头返回元素。
语法
{{ 对象 | limitTo : 限制 : 开始 }}
参数值
| 值 | 描述 |
|---|---|
| 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 = ["奥迪", "宝马", "道奇", "菲亚特", "福特", "沃尔沃"];
});
</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 = ["奥迪", "宝马", "道奇", "菲亚特", "福特", "沃尔沃"];
});
</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 = "您好，欢迎来到 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 过滤器
