Filter array of objects by attribute with integer value in ng-repeat

Question

I have the directive like this

ng-repeat="place in tb_places | filter:{'id':inputID}"

to output some array of objects looks like this

$scope.tb_places = [
{name: 'some1', id:1}
...
{name: 'some10', id:10}
{name: 'some11', id:11}
{name: 'some12', id:12} 
...
]

when i change the inputID and set it equal to 1, the result array fills with elements of source array with 'ids' of 1 and 10,11,12. Thus, the part of 'id' value is checked like substrings, not a numbers. How can i cure it?

thanks!

UPD i've tried to add ":true" in filter expression - it completely clears output (result array), It works for a simple array of strings, but not the objects ("true" wants exact match with pattern object, it means with all its properties)

SOLVED!!!

Sorry guys, my fault! 'inputID' was not the same type, as 'id' (string vs int), so built-in comparator (":true") returns false. Many thanks!

ps sorry, i can't vote for you answers - lack of reputation ... see you!

Answer 1

You need to add the comparator as per the angular filter to achieve your requirement.

Can you change the code as:

ng-repeat="place in tb_places | filter: {'id' : inputID} : true"

Answer 2

You'll need to either supply your own comparator or manually convert the queried against value to an integer and use the true flag:

Controller:

app.controller('DemoCtrl', function() {
  this.query = '1';

  this.queryAsInt = function() {
    return parseInt(this.query, 10);
  };

  this.stuff = [
    {id: 1, label: 'Foobar 1'},
    {id: 2, label: 'Foobar 2'},
    {id: 3, label: 'Foobar 3'},
    {id: 4, label: 'Foobar 4'},
    {id: 5, label: 'Foobar 5'},
    {id: 6, label: 'Foobar 6'},
    {id: 7, label: 'Foobar 7'},
    {id: 8, label: 'Foobar 8'},
    {id: 9, label: 'Foobar 9'},
    {id: 10, label: 'Foobar 10'},
    {id: 11, label: 'Foobar 11'},
    {id: 11, label: 'Foobar 12'}
  ];

  this.compare = function(a, b) {
    return parseInt(a, 10) === parseInt(b, 10);
  };
});

View:

<div ng-controller="DemoCtrl as demo">
  <input ng-model="demo.query">
  <p>With custom comparator:</p>
  <ul>
    <li ng-repeat="item in demo.stuff | filter:{id:demo.query}:demo.compare">
      {{item.label}}
    </li>
  </ul>

  <p>With type casting:</p>
  <ul>
    <li ng-repeat="item in demo.stuff | filter:{id:demo.queryAsInt()}:true">
      {{item.label}}
    </li>
  </ul>
</div>);

And here's a running example: http://jsbin.com/kecihexeyu/1/edit?html,js,output

Answer 3

Write your own comparator.

HTML

<li ng-repeat="place in tb_places | filter:{'id':inputID}: filterId">{{place.id}}</li>

Javascript

filterId = function(actual, expected) {
    return actual == expected;
}

Plunker full version. http://plnkr.co/edit/3JEvThiemq8ro8cXCYBd?p=preview