web-dev-qa-db-fra.com

Filtrage d'un Angular 1,2 ng-repeat avec "suivi par" par une propriété booléenne

J'essaie de filtrer certains éléments de la liste en fonction de la valeur d'une propriété booléenne, mais quoi que je fasse, la liste entière est toujours affichée. Certaines des choses que j'ai essayées ont été tellement cassées que rien ne s'affiche, mais ce n'est ni ici ni là-bas. Je ne parviens pas à faire fonctionner mon filtrage comme souhaité:

$scope.attendees = [
     {"firstname":"Steve",    "lastname":"Jobs",  "arrived":true,  "id":1}
    ,{"firstname":"Michelle", "lastname":"Jobs",  "arrived":false, "id":2}
    ,{"firstname":"Adam",     "lastname":"Smith", "arrived":true,  "id":3}
    ,{"firstname":"Megan",    "lastname":"Smith", "arrived":false, "id":4}
    ,{"firstname":"Dylan",    "lastname":"Smith", "arrived":false, "id":5}
    ,{"firstname":"Ethan",    "lastname":"Smith", "arrived":false, "id":6}
];

Utilisation du filtrage ng-repeat suivant:

<ul>
    <li ng-repeat="person in attendees track by person.id | filter:arrived:'false'">
            {{person.lastname}}, {{person.firstname}}
    </li>
</ul>

J'ai l'impression que j'ai essayé toutes les permutations référencées, dont la plupart provenaient de différents résultats de recherche StackOverflow:

  • filter:'arrived'
  • filter:arrived
  • filter:'person.arrived'
  • filter:person.arrived
  • filter:{arrived:true}
  • filter:{arrived:'true'}
  • filter:{person.arrived:true}
  • filter:{person.arrived:'true'}

J'ai également essayé de créer une fonction de filtre personnalisée:

$scope.isArrived = function(item) {
    return item.arrived;
};

Et l'appliquer ainsi:

  • filter:isArrived
  • filter:'isArrived'
  • filter:{isArrived(person)}
  • filter:isArrived(person)
  • filter:'isArrived(person)'

Aucun de ceux-ci ne semble fonctionner. Qu'est-ce que je rate?

Voici un plnkr qui montre mon problème .

angularjsangularjs-ng-repeat
78
Adam Tuttle

La piste par doit être à la fin de l'expression:

<li ng-repeat="person in attendees | filter: {arrived: false } track by person.id">
244
Gruff Bunny

@ Gruff's answer a raison, mais je voudrais juste donner une réponse de source officielle:

De la Angular ng-repeat docs :

Remarque: track by doit toujours être la dernière expression :

<div ng-repeat="model in collection | orderBy: 'id' as filtered_result track by model.id">
  {{model.name}}
</div>

Il apparaît également dans la partie "Arguments" de la documentation:

Notez que l'expression de suivi doit être la dernière, après tous les filtres et l'expression d'alias.

2
Mistalis