You must understand one thing about angle filters: order matters !!! and the rule is that they run in the same order they are written from left to right.
{{expresion | filtro1:parametro | filtro2:parametro | filtro3:parametro }}
First angular you will evaluate the expression, the result of this evaluation will be the input of filtro1
, the result of this processing will be the entry of filter2
and so on while filters are found in the full expression.
To make you understand this better I am going to write your own filter but in parts, adding one more filter for each ng-repeat
to check the results of each application
angular.module('app', [])
.controller('CollectionCtrl', function($scope) {
// collecione de datos
$scope.collecion = [{
nombre: 'Juan',
tipo: 'persona'
}, {
nombre: 'Lassie',
tipo: 'perro'
}, {
nombre: 'Pedro',
tipo: 'persona'
}, {
nombre: 'Eduardo',
tipo: 'persona'
}, {
nombre: 'Rintintin',
tipo: 'perro'
}, {
nombre: 'Frank',
tipo: 'persona'
}];
});
hr {
margin: 20px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="CollectionCtrl">
<h3>Collecion completa</h3>
<div ng-repeat="obj in collecion">
{{obj.nombre}}
</div>
<hr>
<h3>
Collecion filtrada tipo: 'persona'
</h3>
<div ng-repeat="obj in collecion | filter: {tipo: 'persona'}">
{{obj.nombre}}
</div>
<hr>
<h3>
Collecion filtrada y ordenada
</h3>
<div ng-repeat="obj in collecion | filter: {tipo: 'persona'} | orderBy : 'nombre'">
{{obj.nombre}}
</div>
<hr>
<h3>
Collecion filtrada, ordenada y limitada a 2 resultados
</h3>
<div ng-repeat="obj in collecion | filter: {tipo: 'persona'} | orderBy : 'nombre' | limitTo: 2">
{{obj.nombre}}
</div>
</div>
So if you do not get the results correctly it is perhaps because the%% filter does not have it written correctly or the data is not arriving correctly because filter
does not change the number of items obtained, only orderBy
and filter
do it. The latter is an equivalent of something like
var resultado = collecion.slice(0, cantidad);