Question

我正在构建一个简单的AngularJS应用程序。我有一个对象数组，例如

this.properties = [{
  "name": "Jumbo",
  ...
}, {
  "name": "Denegin Keskikankaantie 9 Koy"
  ...
}, ...]

总共少于100个对象。我构建了一个简单的搜索输入：

<input type="text" ng-model="vm.searchQuery" />

并在ng-repeat指令中使用它：

<p ng-repeat="property in vm.properties | filter:vm.searchQuery">
  {{::property.name}}
</p>

之前我做过这个，其他应用程序中的一切都运行良好。我也试过filter:{name: vm.searchQuery}。

它有奇怪的行为，它没有用我的searchQuery显示属性，例如如果我输入 Jumbo ，则不会显示，但是......其中一些会一直显示，例如如果vm.searchQuery === "Jumbo"显示 Denegin Keskikankaantie 9 Koy 。它一直是随机的。

有人知道这可能是什么原因吗？

更新

我已使用我的数据（plunker）更新了评论中的plunker。它完美地运作。它也可以在我的本地服务器上运行。它甚至可以与生产中的一些用户一起使用。我不知道，它应该工作。我只是感兴趣并试图弄清楚它为什么没有。

最终更新：发现问题

抱歉，刚刚查看了生产中的代码，并注意track by $index指令中的ng-repeat。这就是这种奇怪行为的原因。删除它解决了问题。

我不确定是否应该保留这个问题，因为原始问题中存在错误，我的 ng-repeat指令：

<p ng-repeat="property in vm.properties | filter:vm.searchQuery track by $index>
  {{::property.name}}
</p>

Answer 1

<强> HTML

<body ng-app>
    <div ng-controller="Controller">
        City: <input type="text" ng-model="name"><br>
        Order by:
        <a href="" ng-click="predicate = 'name'">name</a>
        <a href="" ng-click="predicate = 'polulation'">population</a>
        <ul>
          <li ng-repeat="city in cities | filter: name | orderBy: predicate">
             {{ city.name }} | {{ city.population }}
          </li>
        </ul>
    </div>
</body>

<强>的Javascript

function Controller($scope){
    $scope.cities = [
        {name: "Shanghai", population: "16 060 307"},
        {name: "Lagos", population: "13 969 284"},
        {name: "Karachi", population: "13 907 015"},
        {name: "Istanbul", population: "12 478 447"},
        {name: "Mumbai", population: "12 111 194"},
        {name: "Moscow", population: "11 821 873"},
        {name: "São Paulo", population: "11 716 620"},
        {name: "Beijing", population: "11 070 654"},
        {name: "Guangzhou", population: "11 007 835"},
        {name: "Delhi", population: "10 520 000"},
        {name: "Lahore", population: "10 467 400"},
        {name: "Shenzhen", population: "10 442 426"},
        {name: "Seoul", population: "9 761 407"},
        {name: "Jakarta", population: "9 341 844"},
        {name: "Tianjin", population: "8 981 087"},
        {name: "Chennai", population: "8 967 665"},
        {name: "Tokyo", population: "8 922 949"},
        {name: "Cairo", population: "8 906 039"},
        {name: "Dhaka", population: "8 873 017"},
        {name: "Mexico City", population: "8 859 036"},
        {name: "Lima", population: "8 754 000"},
        {name: "Kinshasa", population: "8 425 970"},
        {name: "Bangalore", population: "8 336 697"},
        {name: "New York", population: "8 308 369"},
        {name: "London", population: "8 280 925"},
        {name: "Bangkok", population: "8 244 535"},
        {name: "Tehran", population: "8 220 237"},
        {name: "Dongguan", population: "7 776 845"},
        {name: "Bogotá", population: "7 681 700"},
        {name: "Ho Chi Minh City", population: "7 310 691"},
        {name: "Faisalabad", population: "7 108 100"},
        {name: "Hong Kong", population: "6 844 100"},
        {name: "Hanoi", population: "6 809 970"},
        {name: "Hyderabad", population: "6 434 373"},
        {name: "Wuhan", population: "6 429 923"},
        {name: "Rio de Janeiro", population: "6 151 622"},
        {name: "Foshan", population: "6 150 000"},
        {name: "Baghdad", population: "5 570 585"},
        {name: "Ahmedabad", population: "5 399 200"},
        {name: "Singapore", population: "5 391 028"},
        {name: "Shantou", population: "5 188 286"},
        {name: "Riyadh", population: "5 131 967"},
        {name: "Saint Petersburg", population: "5 112 018"}
    ];
    $scope.predicate = 'population';
}

demo

AngularJS搜索过滤器奇怪的行为

1 个答案: