ng-repeat 与 track by 和 filter 和 orderBy 不工作答案

【问题标题】：ng-repeat with track by and filter and orderBy not workingng-repeat 与 track by 和 filter 和 orderBy 不工作
【发布时间】：2015-06-18 22:45:03
【问题描述】：

我有这个代码。

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>

我不知道为什么订单不起作用以及过滤器为什么不起作用。

在另一个问题上，我读到了一些无法过滤或排序对象的内容。但我有一个上面的对象数组。而且，它应该可以工作！？

有什么问题？

【问题讨论】：

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

【解决方案1】：

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

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

【讨论】：

这确实很重要。如果没有引号，它将查找不存在的 $scope.name 的内容。您的版本的 jsfiddle：jsfiddle.net/saw1uLs9
有趣！感谢这个不带引号的例子。

【解决方案2】：

要将跟踪与过滤器一起使用，必须在过滤器之后添加按表达式的跟踪。

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

这是工作的fiddle

【讨论】：

不！ :D 这不是那么容易吗？但它有效 :D 非常感谢！
在所有类似的问题中，这是最贴切的答案！
对于 orderBy 子句的说法。