current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 3 down vote favorite

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!

share|improve this question
    
So you want an exact match? Check out this stackoverflow.com/questions/17480526/… – Delta Apr 24 at 14:06
1  
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 at 14:20
up vote 1 down vote

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"
share|improve this answer
    
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 at 14:10
    
This is not working because angular.equals won't match because of the type is not matched – hutingung Apr 24 at 14:36
up vote 1 down vote

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

share|improve this answer
    
Thank you!!! It helped find the types mismatch – georgiy.zhuravlev Apr 24 at 14:55
up vote 1 down vote

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

share|improve this answer
    
Thank you!!! It helped find the types mismatch – georgiy.zhuravlev Apr 24 at 14:54

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.