1

Tengo el siguiente problema.

Al presentar una colección de objetos, necesito establecer un límite de 8 entradas. Lo cierto es que usando limitTo:8 angular hace cosas raras y me trae siempre una cantidad errada y distinta a la que yo quiero, además hace mal el orderBy.

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

Existe alguna "regla" que indique el orden en el que se deben aplicar estos filtros?.

Gracias.

4
  • Por favor, incluye una muestra de los datos y del criterio de búsqueda. Commented el 28 sept. 2016 a las 21:37
  • Es una coleccion que lista items y debe filtrarse por un campo que tiene dos valores "Pre" o "Pro" , a su vez debe ordenarse por País. Estas dos funcionalidad estan correctas, el error se da unicamente al aplicar el "limitTo:" Commented el 28 sept. 2016 a las 21:41
  • @JoaquínPiñeyro El orden es correcto, Me parece raro que no funcione como debería. Mira cómo funciona este codigo similar al tuyo.
    – gugadev
    Commented el 29 sept. 2016 a las 3:35
  • Si muestras tu datos y criterio podemos ayudar mas. A mi el orden es correcto y el codigo debe funciona sin problema. Mira este ejemplo en JSFiddle: ejemplo. Commented el 29 sept. 2016 a las 13:46

2 respuestas 2

1

Debes entender una cosa sobre los filtros de angular: ¡¡¡el orden importa!!! y la regla es que estos se ejecutan en el mismo orden que se escriben de izquierda a derecha.

{{expresion | filtro1:parametro | filtro2:parametro | filtro3:parametro }}

Primero angular te evaluará la expresión, el resultado de esta evaluación será el la entrada de filtro1, el resultado de este procesamiento será la entrada de filter2 y así sucesivamente mientras se encuentren filtros en la expresión completa.

Para que entiendas mejor esto te voy a escribir tu mismo filtro pero por partes, agregando un filtro más por cada ng-repeat para que compruebes los resultados de cada aplicación

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>

Así que si no obtienes los resultados correctamente es quizás porque el filtro filter no lo tienes bien escrito o no te están llegando los datos correctamente ya que orderBy no cambia la cantidad de ítems obtenidos, solo filter y limitTo lo hacen. Este ultimo es un equivalente de algo como

var resultado = collecion.slice(0, cantidad);
-1

Al fin y al cabo el problema era porque tenia un ng-show con una logica bastante complicada, lo que hice fue hacer esa lógica en un método del controlador y que éste sea el primer filtro de mi colección. Gracias por las respuestas!

1
  • Si estás usando ng-show para ocultar porque no usar ng-if y dejas el filtro como está. Así tu programa es fácil de leer y cualquiera puede entender la lógica de lo que quisiste escribir en lugar de crear una solución rebuscada.
    – devconcept
    Commented el 6 oct. 2016 a las 14:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.