Фильтр limitTo в AngularJS

Определение и использование

limitTo Фильтр возвращает массив или строку, содержащую только указанное количество элементов.

Когда limitTo Фильтр возвращает массив, содержащий только указанное количество элементов.

Когда limitTo Фильтр возвращает строку, содержащую только указанное количество символов.

Когда limitTo Фильтр возвращает строку, содержащую только указанное количество цифр.

Использование отрицательных чисел для возвращения элементов, начинающихся с конца строки, а не с начала.

Связанные страницы

Учебник AngularJS:Фильтры Angular

Пример

Пример 1

Показывать только первые три элемента массива:

Показать первые три цифры номера:
<ul>
<li ng-repeat="x in cars | limitTo : 3">{{x}}</li>
</ul>
<h1>{{phone | limitTo : 3}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
    $scope.cars = ["Audi", "BMW", "Dodge", "Fiat", "Ford", "Volvo"];
$scope.phone = "123456789";
);

</script>

Пример 2

Показывать последние три элемента массива:

Показать первые три цифры номера:
<ul>
<li ng-repeat="x in cars | limitTo : -3">{{x}}</li>
</ul>
<h1>{{phone | limitTo : 3}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
    $scope.cars = ["Audi", "BMW", "Dodge", "Fiat", "Ford", "Volvo"];
$scope.phone = "123456789";
);

</script>

Пример 3

Показывать три элемента с позиции 1:

Показать первые три цифры номера:
<ul>
<li ng-repeat="x in cars | limitTo : 3 : 1">{{x}}</li>
</ul>
<h1>{{phone | limitTo : 3}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
    $scope.cars = ["Audi", "BMW", "Dodge", "Fiat", "Ford", "Volvo"];
$scope.phone = "123456789";
);

</script>

Пример 4

Показывать первые три символа строки:

Показать первые три цифры номера:
<h1>{{txt | limitTo : 3}}</h1>
<h1>{{phone | limitTo : 3}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
    $scope.txt = "Hello, welcome to AngularJS";
$scope.phone = "123456789";
);

</script>

例子 5

Пример 5

Показать первые три цифры номера:
<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>

Попробуйте сами

Грамматика {{ объект Описание | limitTo : Число, определяющее количество элементов, которые нужно вернуть. :

}}