Problem with ng-repeat, bad behavior when applying filters

1

I have the following problem.

When presenting a collection of objects, I need to set a limit of 8 entries. The truth is that using% co_of angular% makes rare things and always brings me a wrong amount and different from the one I want, also makes the limitTo:8 wrong.

ng-repeat="item in Items| filter:{tipo:'tipo'} | orderBy:'micriterio' | limitTo:8"

Is there a "rule" that indicates the order in which these filters should be applied?

Thank you.

    
asked by Joaquín Piñeyro 28.09.2016 в 23:22
source

2 answers

-1

After all, the problem was because I had a ng-show with a rather complicated logic, what I did was to do that logic in a controller method and that this is the first filter of my collection. Thanks for the answers!

    
answered by 04.10.2016 / 14:21
source
1

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);
    
answered by 29.09.2016 в 16:01