Filtr limitTo w AngularJS

Definicja i użycie

limitTo Filtr zwraca tablicę lub ciąg znaków zawierający tylko określoną liczbę elementów.

Kiedy limitTo Filtr używany dla tablic zwraca tablicę zawierającą tylko określoną liczbę elementów.

Kiedy limitTo Filtr używany dla ciągów znaków zwraca ciąg znaków zawierający tylko określoną liczbę znaków.

Kiedy limitTo Filtr używany dla liczb zwraca ciąg znaków zawierający tylko określoną liczbę cyfr.

Używanie ujemnych liczb zwraca elementy zaczynające się od końca, zamiast od początku.

Strony związane

Tutorial AngularJS:Filtrowanie Angular

Przykład

Przykład 1

Wyświetla tylko pierwsze trzy elementy tablicy:

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

Spróbuj sam

Przykład 2

Wyświetla ostatnie trzy elementy tablicy:

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

Spróbuj sam

Przykład 3

Wyświetla trzy elementy zaczynając od pozycji 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>

Spróbuj sam

Przykład 4

Wyświetla pierwsze trzy znaki ciągu:

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

Spróbuj sam

Przykład 5

Wyświetlaj pierwsze trzy cyfry liczby:

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

Spróbuj sam

Gramatyka

{{ obiekt | limitTo : limit : zaczynaj }}

Parametry