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.

score 2 · Accepted Answer · answered Aug 28 '15 at 13:45

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.

score 1 · Answer 2 · answered Aug 28 '15 at 13:14

1

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).

answered Aug 28 '15 at 13:14

richardtz

4,993
2
27
38

of course it's going to be work. But I want to filter by multiple fields. Take a look: http://stackoverflow.com/questions/13216115/filtering-by-multiple-specific-model-properties-in-angularjs-in-or-relationship – rajagopalx Aug 28 '15 at 13:18
I believe he is wanting to provide a filter function. – Michael G Aug 28 '15 at 13:18
Ok, I misunderstood what you needed. Michael G has a proper solution in his answer – richardtz Aug 28 '15 at 14:20

score 0 · Answer 3 · answered Aug 28 '15 at 13:15

0

Change code of list.html like this. You have to pass textbox's ng-model with filter

<div class="container">

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

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

    </ul>

 </div>

answered Aug 28 '15 at 13:15

Paresh Gami

4,777
5
23
41

I want to achieve this through filter function. pls see : http://stackoverflow.com/questions/13216115/filtering-by-multiple-specific-model-properties-in-angularjs-in-or-relationship – rajagopalx Aug 28 '15 at 13:20

Filtering not working in angular js template

3 Answers3