limitToФильтр AngularJS


Пример

Отображать только первые три элемента массива:

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

Значения параметров

Value Description
limit  A number, specifying how many elements to return
begin Optional. A number specifying where to begin the limitation. Default is 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