web-dev-qa-db-ja.com

ng-repeat with track by、filter、orderByが機能しない

私はこのコードを持っています。

http://jsfiddle.net/0tgL7u6e/

JavaScript

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.nameFilter = '';
    $scope.contacts = [
        {name: 'GHI'},
        {name: 'DEF'},
        {name: 'ABC'},
        {name: 'JKL'}
    ];
}

表示

<div ng-controller="MyCtrl">
    <div><input type="text" ng-model="nameFilter" placeholder="Search..." /></div>
    <p ng-repeat="contact in contacts track by $index | filter: nameFilter | orderBy: name">{{ contact.name }}</p>
</div>

順序が機能しない理由と、フィルターが機能しない理由がわかりません。

別の質問で、オブジェクトをフィルター処理または順序付けできないものについて読みました。しかし、上記のオブジェクトの配列があります。また、動作するはずです！？

どうしたの？

javascriptangularjsangularjs-scopeangularjs-ng-repeat
23
PatrickB

フィルターで追跡を使用するには、フィルターの後に式による追跡を追加する必要があります。

<p ng-repeat="contact in contacts | orderBy: 'name' | filter: nameFilter  track by $index">{{ contact.name }}</p>

これが動作です fiddle

56
Sajeetharan - MSFT

コードを次のように変更する必要があります

<div ng-controller="MyCtrl">
    <div><input type="text" ng-model="nameFilter" placeholder="Search..." /></div>
    <p ng-repeat="contact in contacts  | orderBy: name | filter: nameFilter track by $index ">{{ contact.name }}</p>
</div>
0
Reza