web-dev-qa-db-fra.com

angular ng-repeat ignore un élément s'il correspond à une expression

Je cherche un moyen de dire fondamentalement angular de sauter un élément dans une répétition de ng s'il correspond à une expression, fondamentalement continue;

Dans le contrôleur:

$scope.players = [{
    name_key:'FirstPerson', first_name:'First', last_name:'Person'
}, {
    name_key:'SecondPerson', first_name:'Second', last_name:'Person'
}]

Maintenant, dans mon modèle, je veux montrer à tout le monde que cela ne correspond pas name_key='FirstPerson'. J'ai pensé qu'il devait s'agir de filtres, donc j'ai configuré un Plunkr pour le manipuler, mais je n'ai pas eu de chance. tentative de Plunkr

angularjsangularjs-ng-repeat
90
aron.duby

Comme @ Maxim Shoustin suggéré, le meilleur moyen de réaliser ce que vous voulez consiste à utiliser un filtre personnalisé.
Mais il existe d’autres moyens, l’un d’eux étant d’utiliser le ng-if directive sur le même élément où vous avez mis le ng-repeat directive (aussi, voici le plunker ):

<ul>
    <li ng-repeat="player in players" ng-if="player.name_key!='FirstPerson'"></li>
</ul>

Cela peut présenter un inconvénient mineur du point de vue estétique, mais présente un avantage majeur: votre filtrage peut être basé sur une règle moins étroite couplée au tableau players et pouvant facilement accéder aux autres données de votre application. portée:

  <li 
      ng-repeat="player in players" 
      ng-if="app.loggedIn && player.name != user.name"
  ></li>

Mettre à jour
Comme indiqué, il s’agit d’une des solutions à ce type de problème et peut correspondre ou non à vos besoins.
Comme indiqué dans les commentaires, ng-if _ est une directive, ce qui signifie qu’elle peut faire plus de tâches en arrière-plan que ce à quoi vous vous attendiez.
Par exemple, ng-ifcrée une nouvelle portée à partir de son parent :

L'étendue créée dans ngIf hérite de l'étendue parent à l'aide de l'héritage prototypique.

Cela n'affecte généralement pas le comportement normal, mais pour éviter les imprévus, gardez cela à l'esprit avant de l'implémenter.

142
gion_13

Je sais que c’est un vieux problème, mais au cas où quelqu'un chercherait une autre solution possible, voici une autre façon de résoudre ce problème - utilisez la norme filtre fonctionnalité:

Object: Un objet de modèle peut être utilisé pour filtrer des propriétés spécifiques sur des objets contenus dans un tableau. Par exemple, {name: "M", phone: "1"} predicate renverra un tableau d'éléments dont le nom de propriété contient "M" et la propriété phone contient "1". ... Le prédicat peut être annulé en préfixant la chaîne avec!. Par exemple, {name: "! M"} prédicat retournera un tableau d'éléments. qui ont un nom de propriété ne contenant pas "M".

Donc, pour l'exemple TS, quelque chose comme ceci devrait faire:

<ul>
    <li ng-repeat="player in players | filter: { name_key: '!FirstPerson' }"></li>
</ul>

Pas besoin d'écrire des filtres personnalisés, pas besoin d'utiliser ng-if avec sa nouvelle portée.

41
Ilya Luzyanin

Vous pouvez utiliser le filtre personnalisé lorsque vous implémentez ng-repeat. Quelque chose comme:

 data-ng-repeat="player in players |  myfilter:search.name

myfilter.js:

app.filter('myfilter', function() {


   return function( items, name) {
    var filtered = [];

    angular.forEach(items, function(item) {

      if(name == undefined || name == ''){
        filtered.Push(item);
        }

      /* only if you want start With*/
      // else if(item.name_key.substring(0, name.length) !== name){
      //   filtered.Push(item);
      // }

      /* if you want contains*/
      // else if(item.name_key.indexOf(name) < 0 ){
      //   filtered.Push(item);
      // }

       /* if you want match full name*/
       else if(item.name_key !== name ){
        filtered.Push(item);
      }
    });

    return filtered;
  };
});

Démo Plunker

19
Maxim Shoustin