web-dev-qa-db-fra.com

Comment utiliser ng-repeat avec filter et $ index?

Je veux utiliser ng-repeat dans Angular, alors que je veux seulement sortir quelques éléments du tableau. Un exemple:

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

Cependant, cela ne fonctionne pas. S'il-te-plaît dis moi comment faire ça; ne sortir que l'index exact des éléments.

javascriptangularjsng-repeat
26
Frankjs

Dans votre code, le filtre s'applique sur le tableau 'items', et non sur chaque élément du tableau, c'est pourquoi il ne fonctionne pas comme prévu.

Au lieu de cela, vous pouvez utiliser ng-show (ou ng-if):

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

Voir: http://jsfiddle.net/H7d26

EDIT: Utilisez la directive ng-if si vous ne souhaitez pas ajouter d'éléments invisibles:

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

Créez un filter personnalisé, par exemple:

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

Puis changez le ng-repeat en:

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

Ou filtrer par (index % 3 === 1) comme:

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

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

16
CD..

Ce que vous devez faire, c'est trouver l'index de "item" dans $ scope.items. Voir ci-dessous

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

Donc, un exemple du monde réel (pour les autres qui rencontrent cette solution) serait.

<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>

L’exemple ci-dessus obtiendra la position correcte quel que soit le tri ou le filtrage

8
dworrad

Toutes les réponses précédentes fonctionneront, mais si vous souhaitez utiliser un filtre, vous pouvez également le définir vous-même, comme dans ce violon: 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;
    }
});

puis appelez ça comme ça:

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

(J'ai ajouté une complexité supplémentaire avec un paramètre, si vous voulez le changer rapidement en nombres pairs par exemple)

S'amuser

++

2
DotDotDot

Je suggère de filtrer avec une fonction:

ng-repeat"item in filterItems(items)"

Et sur le contrôleur:

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

Une autre solution pour résoudre ce problème crée une nouvelle "liste" (je ne connais pas le terme approprié dans ce contexte) dans le ng-repeat. Cette nouvelle liste peut alors être référencée dans le cadre

<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>

Le ng-if sur la span enveloppant la seconde moitié empêche l'affichage du texte de base lorsque l'élément précédent est le dernier élément de la liste.

0
Adam Shaver