Фільтрування кутового 1,2 нг-повтору за допомогою “track by” логічним властивістю


80

Я намагаюся відфільтрувати деякі елементи списку на основі значення логічної властивості, але незалежно від того, що я роблю, весь список завжди відображається. Деякі речі, які я спробував, були настільки зламані, що нічого не відображається, але це ні тут, ні там. Я не можу змусити свою фільтрацію працювати належним чином:

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

Використовуючи таку фільтрацію повторення нг:

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

Я відчуваю, що перепробував усі перестановки, на які я можу знайти посилання, більшість з яких походять з різних результатів пошуку 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'}

Я також спробував створити власну функцію фільтра:

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

І застосовуючи його таким чином:

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

Здається, ніщо з цього не працює. Чого мені не вистачає?

Ось PLNKR, який демонструє мою проблему .

Відповіді:


252

Трек за має бути в кінці виразу:

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

3
Як гортати надокучливо і витрачати 30 хвилин. Я хотів би, щоб це використовувалось trackBy: ..і діяло нормально "як і все інше".
user2864740

Це дуже важливий момент. Відстежуючи унікальні значення, які здебільшого були однаковими для більшості провідних символів, ми отримували помилку дублікатів, оскільки відстеження за не було останнім у виразі. Досить незрозуміла помилка imo.
Matt S

2

Відповідь @ Gruff є правильною, але просто щоб відповісти з офіційного джерела:

З ng-repeatдокументації Angular :

Примітка: track byзавжди повинен бути останнім виразом :

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

Це також з'являється в частині "Аргументи" документації:

Зверніть увагу, що вираз для відстеження повинен стояти останнім після будь-яких фільтрів та вираз псевдоніма.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.