searching using angular filter

Question

Refer below code.

Using angular filter i can search friend.name or friend.phone or both but how to make search in string that combines both, like in below example code i want to make a search for "mary - 80" and it should display only one list element "Mary - 800-BIG-MARY".

How to do this, pls help me out. Is it possible with using default angularjs filter??

<!doctype html>
    <head>
       <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> 
    </head>

<body ng-app="">
    <div ng-init="friends = [{name:'John', phone:'555-1276'},
                     {name:'Mary', phone:'800-BIG-MARY'},
                     {name:'Mike', phone:'555-4321'},
                     {name:'Adam', phone:'555-5678'},
                     {name:'Julie', phone:'555-8765'},
                     {name:'Juliette', phone:'555-5678'}]"></div>

    <label>Search: <input ng-model="searchText"></label>
    <li ng-repeat="friend in friends | filter: searchText">
        <span>{{friend.name}} - {{friend.phone}}</span>
    </li>
</body>
</html>

plunker link for same code: http://plnkr.co/edit/p7valhnDulHorw8xDYu8?p=preview

David Votrubec · Accepted Answer · 2015-07-13 10:29:00Z

1

That's how angularJs filter works by default. If you want to filter by a specific combination of properties, then you have to implement your own filter function. Like here https://scotch.io/tutorials/building-custom-angularjs-filters

super simple example

  $scope.customFilter = (item)=> {
    //TODO: Add your own properties here
    return item.someProperty == $scope.filterValue;
  };

html

<htmlElement ng-repeat="item in itemList | filter:customFilter"></htmlElement>

answered Jul 13, 2015 at 10:29

David Votrubec

4,1843 gold badges35 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ashish Mishra Over a year ago

Thanks for you answer. It is clear to me that i need to write a custom filter for what i ask, but are you sure it is not possible using default filter?

David Votrubec Over a year ago

no, it is not possible. You want to search according to 2 properties, but the filter has single argument. You have to parse the filter value in order to be able to search by 2 different values in 2 different properties

Vanojx1 · Accepted Answer · 2015-07-13 10:52:47Z

I think this will do what you want

change the repeat:

<li ng-repeat="friend in friends | filterText:searchText">

and then add this filter

  app= angular.module("myApp",[]);

  app.filter("filterText",function(){
    return function(items,text){
      var result = [];
      text = text != undefined ? text : "";

      var words = text.split(" ");

      angular.forEach(items,function(v,i){

          allFound = true;
          angular.forEach(words,function(v2,i2){
             if((v.name+v.phone).toUpperCase().indexOf(v2.toUpperCase())==-1){
                allFound = false;
             }
          })
          if(allFound)
          result.push(v);

      });
       return result;
    }
  });

remember to add the ng-app

<body ng-app="myApp">

you dont need to use the '-' in your search, just use "Mary 800" or "Adam 555"

Collectives™ on Stack Overflow

searching using angular filter

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related