W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

AngularJS limitTo 过滤器



Example

仅显示数组的前三个项目:

<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

更多实例

Example

显示数组的最后三个项目:

<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>
尝试一下 »

Example

显示三个项目,从位置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>
尝试一下 »

Example

显示字符串的前三个字符:

<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>
尝试一下 »

Example

显示数字的前三位数字:

<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 过滤器