通过布尔属性用“ track by”过滤Angular 1.2 ng-repeat


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

使用以下ng-repeat过滤:

<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

Answers:


250

track by必须位于表达式的末尾:

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

3
多么令人讨厌的翻转,浪费了30分钟。我希望它trackBy: ..像其他所有东西一样使用并正常运行。
user2864740

这是非常重要的一点。通过跟踪与大多数前导字符基本相同的唯一值,我们发现重复错误,因为在表达式中跟踪不是最后。相当模糊的错误imo。
马特·S

2

@Gruff的答案是正确的,但只是为了从官方来源给出答案:

从Angularng-repeat文档

注意:track by必须始终是最后一个表达式

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

它也出现在文档的“参数”部分:

请注意,在所有过滤器和别名表达式之后,跟踪表达式必须排在最后。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.