Filtro limitTo AngularJS

Definição e uso

limitTo O filtro retorna um array ou string que contém apenas um número específico de elementos.

Quando limitTo Quando o filtro é usado com arrays, ele retorna um array que contém apenas um número específico de itens.

Quando limitTo Quando o filtro é usado com strings, ele retorna uma string que contém apenas um número específico de caracteres.

Quando limitTo Quando o filtro é usado com números, ele retorna uma string que contém apenas um número específico de dígitos.

Ao usar números negativos, o filtro retorna elementos a partir do final do elemento, em vez do início.

Páginas relacionadas

Tutorial AngularJS:Filtros Angular

Exemplo

Exemplo 1

Exibir apenas os três primeiros elementos do array:

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

Experimente você mesmo

Exemplo 2

Exibir os três últimos elementos do array:

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

Experimente você mesmo

Exemplo 3

Exibir três elementos a partir da posição 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>

Experimente você mesmo

Exemplo 4

Exibir os três primeiros caracteres da string:

<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 = "Olá, bem-vindo ao AngularJS";
});
</script>

Experimente você mesmo

Exemplo 5

Mostrar os três primeiros dígitos do número:

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

Experimente você mesmo

Sintaxe

{{ objeto | limitTo : limitar : iniciar }}

Parâmetros