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.