AngularJS search filter weird behavior

Question

I'm building a simple AngularJS application. I have an array of objects, e.g.

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

less than 100 objects in total. I've build a simple search input:

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

and used it inside ng-repeat directive:

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

I did this before and everything worked well in other applications. I also tried filter:{name: vm.searchQuery}.

It has strange behavior, it doesn't show the properties with my searchQuery, e.g. if I type Jumbo, it isn't shown, but... some of them are always shown, e.g. Denegin Keskikankaantie 9 Koy is shown if vm.searchQuery === "Jumbo". It's absolutely random all the time.

Does anybody know what might be the reason for this?

Update:

I've updated the plunker from the comments with my data (plunker). It works perfectly. It works on my local server as well. It even works with some users in the production. I have no idea, it should work. I'm just interested and trying to figure out why it doesn't.

Final update: problem found

Sorry, have just looked at the code in production and notice track by $index in the ng-repeat directive. That was the reason for this strange behaviour. Removing that fixed the problem.

I'm not sure if I should keep this question because there was a mistake in original question, my ng-repeat directive:

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

I have no idea but it works for me: http://plnkr.co/edit/FZZB5AW3o7q9g2MYpb26?p=preview — Mars Robertson, Jun 28 '16 at 11:10
@MichalStefanow Seems that it's working with the dummy data, I've also tried that. I will check the data I have in my application and make an update. — Frelseren, Jun 28 '16 at 11:25
@Frelseren - potentially - http://stackoverflow.com/questions/18128323/angularjs-if-you-are-not-using-a-dot-in-your-models-you-are-doing-it-wrong - here we have dot in the model because we use ```controller as``` syntax... Try adding something like ```vm.searchQuery.text``` (so you don't override the actual binding as you type and create new string) — Mars Robertson, Jun 28 '16 at 17:49
@MichalStefanow Sorry, I had a mistake in my original question, have just noticed that my code in production has `track by $index` that was causing the problem. — Frelseren, Jun 29 '16 at 08:00

score -2 · Answer 1 · answered Jun 28 '16 at 11:06

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

Please provide [your source](https://gist.github.com/patotoma/9154681) when you copy and paste code you do not write. — Mistalis, Jun 28 '16 at 11:19
how exactly is this an answer to the question of why the filter the OP is using isn't working? — Claies, Jun 28 '16 at 14:40

AngularJS search filter weird behavior

1 Answers1