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!

So you want an exact match? Check out this http://stackoverflow.com/questions/17480526/angularjs-filter-exact-match — Delta, Apr 24 '15 at 14:06
i've tried to add ":true" in filter expression - it completely clears output (result array), It works for a simple array of strings, not the objects ("true" wants exact match with pattern object, it means with all properties) — georgiy.zhuravlev, Apr 24 '15 at 14:20

score 6 · Answer 1 · answered Apr 24 '15 at 14:09

6

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"

answered Apr 24 '15 at 14:09

Arulkumar

12,966
14
47
68

i've tried to add ":true" in filter expression - it completely clears output (result array), It works for a simple array of strings, not the objects ("true" compares all properties) – georgiy.zhuravlev Apr 24 '15 at 14:10
This is not working because angular.equals won't match because of the type is not matched – hutingung Apr 24 '15 at 14:36

score 1 · Answer 2 · answered Apr 24 '15 at 14:34

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

score 1 · Answer 3 · answered Apr 24 '15 at 14:38

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

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

3 Answers3

Linked