Angular js filter certain object keys

Question

I have a data object full of data being used on my page however, within one section I want it to be filterable. I want to have one input field which filters through the data, but I want to be able to select the fields in which I filter by and it not be all of the data within the object.

I have made a quick example here http://plnkr.co/edit/huuZ0q0B0ijogXL9ThnX?p=preview

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

  Search: <input ng-model="searchText">
  <table id="searchTextResults">
    <tr><th>Name</th><th>Phone</th></tr>
    <tr ng-repeat="friend in friends | filter:searchText">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
    </tr>
  </table>

I have added a key called random, which contains tv (such as a value of bbc) now if you enter bbc into the input field they all show however, I only want to search name and/or phone.

Any help on this would be greatly appreciated.

I don't think there is an or filter, you may have to create one yourself. — PSL
– PSL, Commented Aug 26, 2014 at 16:45
that's what I thought I've been giving that a go but it's throwing Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! for some reason it's running through for each individual column within my table first — Nick White
– Nick White, Commented Aug 26, 2014 at 16:46
@PSL yes pretty much there however, I am needing a more generic one — Nick White
– Nick White, Commented Aug 26, 2014 at 16:59

PSL · Accepted Answer · 2014-08-26 17:37:43Z

2

You could probably create a custom filter, i believe or is not supported for multiple keys with the default filter.

angular.module('app',[]).filter('customFilter', function(){
     return function(input, searchText){

       if(!angular.isArray(input)) return;

       var exp = new RegExp(searchText, 'ig');
       return input.filter(function(inp){
          return exp.test(inp.name) || exp.test(inp.phone);
       });
     }
  });

Plnk1

Or a more generic one where you can pass keys to search for:-

  angular.module('app',[]).filter('customFilter', function(){
     return function(input, searchText, fields){

       if(!angular.isArray(input)) return;

          var exp = new RegExp(searchText, 'ig');
          fields = fields.split(',');

          return input.filter(function(inp){
            return fields.some(function(key){
              return exp.test(inp[key])
            });
          });
       }
  });

and use as:

<tr ng-repeat="friend in friends | customFilter:searchText:'name,phone'">

Plnk2

See compatibility and polyfill for Array.prototype.some

edited Aug 26, 2014 at 17:37

answered Aug 26, 2014 at 16:59

PSL

124k21 gold badges257 silver badges243 bronze badges

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

3 Comments

Nick White Over a year ago

thanks, however the more generic one doesn't seem to be working? looking at it perhaps it needs to loop over the key?

Nick White Over a year ago

Sorry my mistake, I have a different model name to searchText in my actually working example. Thanks very much @PSL

PSL Over a year ago

you are welcome. Please note that array.some is not available in older browsers. There is a shim you can add. Its in mdn.

Collectives™ on Stack Overflow

Angular js filter certain object keys

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related