ng-repeat with track by和filter and orderBy not working

时间:2015-04-13 14:53:57

标签: javascript angularjs angularjs-scope angularjs-ng-repeat

我有这段代码。

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>

我不知道为什么订单不起作用以及过滤器无法正常工作的原因。

在另一个问题上,我已经读到过无法过滤或订购对象的内容。但我有一系列上面的对象。此外,它应该工作!?

有什么问题?

2 个答案:

答案 0 :(得分:54)

要使用过滤器跟踪,必须在过滤器后添加跟踪表达式。

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

这是工作fiddle

答案 1 :(得分:0)

您必须将代码更改为以下代码

<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>