AngularJS limitTo 过滤器

实例

仅显示数组的前三项:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<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>
<p>仅显示数组的前三项</p>
</body>
</html>

运行一下

定义与用法

limitTo 过滤器返回仅包含指定数量元素的数组或字符串。

当 limitTo 过滤器用于数组时，它将返回一个仅包含指定数量项的数组。

当 limitTo 过滤器用于字符串时，它返回一个仅包含指定数量字符的字符串。

当 limitTo 筛选器用于数字时，它返回一个仅包含指定位数的字符串。

使用负数返回从元素末尾开始的元素，而不是从元素开头开始的元素。

语法

{{ object | limitTo : limit : begin }}

参数值

值	描述
limit	一个数字，指定要返回的元素数
begin	可选。指定限制开始位置的数字。默认值为 0

更多实例

实例

显示数组的最后三项:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<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>
<p>仅显示数组的最后三项</p>
</body>
</html>

运行一下

实例

显示三个项目，从位置 1 开始:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<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>
<p>仅显示数组中的三个项目，从位置1（数组中的第二个项目）开始。</p>
</body>
</html>

运行一下

实例

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

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="sizeCtrl">
<h2>{{txt | limitTo : 3}}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sizeCtrl', function($scope) {
    $scope.txt = "Hello, welcome to AngularJS";
});
</script>
<p>仅显示前三个字符</p>
</body>
</html>

运行一下

实例

显示数字的前三位:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="sizeCtrl">
<h2>{{phone | limitTo : 3}}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sizeCtrl', function($scope) {
    $scope.phone = "123456789";
});
</script>
<p>仅显示前三位数字</p>
</body>
</html>

运行一下

AngularJS limitTo 过滤器

实例

定义与用法

语法

参数值

更多实例

实例

实例

实例

实例

相关页面

分类导航