ブールプロパティによる「trackby」を使用したAngular1.2ng-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です

回答:


252

トラックバイは、式の最後にある必要があります。

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

3
どのようにひっくり返すのが面倒で、30分の無駄です。私はtrackBy: ..それが「他のすべてのように」正常に使用され、動作することを望みます。
user2864740 2015

これは非常に重要なポイントです。ほとんどの先頭文字でほぼ同じ一意の値で追跡すると、式の最後に追跡がなかったため、重複エラーが発生していました。かなりあいまいなエラー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>

また、ドキュメントの「引数」の部分にも表示されます。

トラッキング式は、フィルターとエイリアス式の後に最後に来る必要があることに注意してください。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.