Filtern einer Angular 1.2 ng-Wiederholung mit "track by" durch eine boolesche Eigenschaft

80

Ich versuche, einige Listenelemente basierend auf dem Wert einer booleschen Eigenschaft zu filtern, aber egal was ich mache, die gesamte Liste wird immer angezeigt. Einige der Dinge, die ich versucht habe, waren so kaputt, dass nichts angezeigt wird, aber das ist weder hier noch da. Ich kann meine Filterung nicht wie gewünscht zum Laufen bringen:

$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}
];

Verwenden der folgenden ng-repeat-Filterung:

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

Ich habe das Gefühl, ich habe jede Permutation ausprobiert, auf die ich verweisen kann. Die meisten davon stammen aus verschiedenen StackOverflow-Suchergebnissen:

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

Ich habe auch versucht, eine benutzerdefinierte Filterfunktion zu erstellen:

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

Und so anwenden:

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

Nichts davon scheint zu funktionieren. Was vermisse ich?

Hier ist ein plnkr, der mein Problem demonstriert .

angularjs angularjs-ng-repeat Adam Tuttle
quelle

Antworten:

250

Der Track von muss am Ende des Ausdrucks stehen:

<li ng-repeat="person in attendees | filter: {arrived: false } track by person.id">
Gruff Bunny
quelle
3
Wie nervig und eine Verschwendung von 30 Minuten. Ich wünschte, es würde verwendet trackBy: ..und normal "wie alles andere" gehandelt.
user2864740
Dies ist ein sehr wichtiger Punkt. Bei der Verfolgung nach eindeutigen Werten, die für die meisten Hauptfiguren weitgehend identisch waren, wurde ein Duplikatfehler angezeigt, da die Verfolgung nach nicht zuletzt im Ausdruck war. Ziemlich obskurer Fehler imo.
Matt S
2

@ Gruffs Antwort ist richtig, aber nur um eine Antwort aus einer offiziellen Quelle zu geben:

Aus den Angular- ng-repeatDokumenten :

Hinweis: track bymuss immer der letzte Ausdruck sein :

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

Es erscheint auch im Teil "Argumente" der Dokumente:

Beachten Sie, dass der Tracking-Ausdruck nach allen Filtern und dem Alias-Ausdruck an letzter Stelle stehen muss.

Mistalis
quelle