javascript - bootstrap - ¿Cómo usar ng-repeat con filtro y $ index?

ng repeat select index

Question

Quiero usar ng-repeat en Angular, mientras que solo quiero mostrar algunos elementos de la matriz. Un ejemplo:

ng-repeat="item in items | filter:($index%3 == 0)"

Sin embargo, esto no funciona. Por favor dime cómo hacer esto; Sólo salida índice exacto de elementos.

Answer 1

Crea un filter personalizado, por ejemplo:

filter(''modulo'', function(){
  return function (arr, div, val) {
      return arr.filter(function(item, index){
          return index % div === (val || 0);
      })
  };
});

Luego cambia la ng-repeat a:

<ul ng-repeat="item in items | modulo:3">

O filtrar por (index % 3 === 1) como:

<ul ng-repeat="item in items | modulo:3:1"> 

http://jsfiddle.net/Tc34P/2/

Answer 2

En su código, el filtro se aplica a la matriz de ''elementos'', no a cada elemento de la matriz, por eso no funciona como esperaba.

En su lugar, puedes usar ng-show (o ng-if):

<ul>
    <li ng-repeat="item in items" ng-show="$index % 3 == 0">{{item}}</li>
</ul>

Ver: http://jsfiddle.net/H7d26

EDITAR: use la directiva ng-if si no desea agregar elementos de dom invisibles:

<ul>
    <li ng-repeat="item in items" ng-if="$index % 3 == 0">{{item}}</li>
</ul>

Answer 3

Lo que debe hacer es encontrar el índice del "elemento" en $ scope.items. Vea abajo

ng-repeat"item in items | filter:(items.indexOf(item)%3 == 0)

Por lo tanto, un ejemplo del mundo real (para otros que se encuentren con esta solución) sería.

<div ng-repeat="item in filtered = (items | filter:customfilter | orderBy:customsort)">
    <div> This is number {{items.indexOf(item)}} in the items list on the scope.</div>
</div>

El ejemplo anterior obtendrá la posición correcta independientemente de la clasificación o el filtrado

Answer 4

Sugiero filtrar con una función:

ng-repeat"item in filterItems(items)"

Y en el controlador:

$scope.filterItems= function(items) {
    var result = {};
    angular.forEach(items, function(item) {
       // if item is something.. add to result
    });
    return result;
}

Answer 5

Todas las respuestas precedentes funcionarán, pero si desea usar un filtro, también puede definirlo usted mismo, como en este violín: http://jsfiddle.net/DotDotDot/58y7u/

.filter(''myFilter'', function(){
    return function(data, parameter){
        var filtered=[];
        for(var i=0;i<data.length;i++){
                if(i%parameter==0)
                    filtered.push(data[i]);
        }
        return filtered;
    }
});

y luego llámalo así:

ng-repeat=''item in items | myFilter:3''

(Agregué complejidad adicional con un parámetro, si desea cambiarlo rápidamente a números pares, por ejemplo)

Que te diviertas

++

Answer 6

Un enfoque alternativo para resolver esto crea una nueva "lista" (no conozco el término adecuado en este contexto) en la ng-repeat . Esta nueva lista puede ser consultada dentro del alcance

<ul class="example-animate-container">
  <li class="animate-repeat" ng-repeat="friend in filteredFriends = ((friends | filter:q:strict) | orderBy:''age'')" ng-if="$index % 2 == 0">
    [{{$index + 1}}] {{filteredFriends[$index].name}} who is {{filteredFriends[$index].age}} years old.
    <span ng-if="$index+1 < filteredFriends.length">[{{$index + 2}}] {{filteredFriends[$index+1].name}} who is {{filteredFriends[$index+1].age}} years old.</span>
  </li>
</ul>

El ng-if en el span envuelve la segunda mitad impide que se muestre el texto base cuando el elemento anterior es el último elemento de la lista.