Filtering not working in angular js template

Question

I want to filter result based on multiple fields.

HTML

<input type="text" ng-model="query">

<ul>
  <li ng-repeat="x in phones | filter: search | orderBy:orderProp" >
    <span>{{x.name}}</span>
    <p> {{ x.id}} </p>
    <p> {{ x.age}} </p>
  </li>

</ul>

In my controller I mentioned,

$scope.search = function (item) {

          return ( (item.name.indexOf($scope.query || '') ) !== -1 || (item.id.indexOf($scope.query || '')) !== -1);

    };

Plnkr: http://plnkr.co/edit/a1khZS9RcFdgitTYPgqs?p=preview

why does the filter not working ? PS: I got error "TypeError: href is null" in firebug.

Answer 1

You're getting an error in your search function.

item.id.indexOf is not a function

You're getting this because item.id is an integer literal.

You can try converting id.toString() first, or parse the query as an integer.

$scope.search = function(item) {

  return ((item.name.indexOf($scope.query || '')) !== -1 || (item.id.toString().indexOf($scope.query || '')) !== -1);

};

Here is a working example. The matching is case sensitive, so keep that in mind.

Answer 2

just replace :

<li ng-repeat="x in phones | filter: search| orderBy:orderProp" >

with

<li ng-repeat="x in phones | filter: query | orderBy:orderProp" >

(the name of your scope attribute is query instead of search).