How to ignore property in angular filter

Question

I'm trying to ignore a property called title in my angular filter. I have a dataset like the below example:

const data = [
    {
        title: 'Title 1'
        groups: [
            {...},
            {...},
            {...}
        ]
    },
    {
        title: 'Title 2'
        groups: [
            {...},
            {...},
            {...}
        ]
    },
    {
        title: 'Title 3'
        groups: [
            {...},
            {...},
            {...}
        ]
    }
];

And i'm using the ng-repeat with filter to iterate over the objects, and other loop to iterate over the groups:

<input ng-model="search">
<div ng-repeat="item in data | filter:search">
    <h1>{{item.title}}</h1>
    <ul>
        <li ng-repeat="group in item.group | filter:search">
            <span>{{group.something}}</span>
        </li>
    </ul>
</div>

Is working fine, but now i would like to ignore the title in the search. I did try several things, like: filter:search:item.title (in the first ng-repeat), or remove the first filter:search, but all tries failed. What i'm missing? Do i need a custom search or something like that?

Thank you.

You have to write your own function or custom filter to achieve this, may be this can help: http://stackoverflow.com/questions/16563018/angularjs-custom-filters-and-ng-repeat — Aayushi Jain, May 10 '17 at 04:19

score 1 · Answer 1 · edited May 23 '17 at 11:47

1

You can specifically enter properties you want to filter and leave out title:

<li ng-repeat="group in item.groups | filter: { something: search }">

The above code will only filter based on the something property.

More answers and explanations here: AngularJS filter only on certain objects

edited May 23 '17 at 11:47

Community

1
1

answered May 10 '17 at 02:48

Eeks33

2,245
1
14
17

1

What if i want search everything in group, but not the title in the item.data? – May 10 '17 at 02:52

score 0 · Answer 2 · answered May 10 '17 at 03:02

0

If you type and no filtering the title property, just remove the first filter. This way when you type the li's isnt match will hide, but their h1's will stay the same place.

answered May 10 '17 at 03:02

joelton

153
2
9

Slava Utesinov · Answer 3 · 2017-05-10T08:16:13.717

You should create custom filter, where you can specify which property should be excluded(ignore parameter) from consideration:

angular.module('app', []).controller('MyController', ['$scope', function($scope) {
    $scope.data = [
      {name:"Tom", title:'London'},
      {name:"Max", title:'Moscow'},
      {name:"Henry", title:'NY'},
      {name:"Paul", title:'NY'},
      {name:"Sam", title:'Paris'}
      ];
}]).filter('myfilter',function(){
  return function(input, search, ignore){
    if(!search)
      return input;
      
    var result = [];
    
    for(var item of input)
      for(var prop in item)
        if(prop != ignore && item[prop].indexOf(search) != -1)
        {
          result.push(item) ;
          break;
        }
      
    return result;
  }
});

<script src="//code.angularjs.org/snapshot/angular.min.js"></script>

<body ng-app="app">
  <div ng-controller="MyController">
    search: <input type='text' ng-model='search' ng-init='search="a"'/>
    ignore: <input type='text' ng-model='ignore' ng-init='ignore="title"'/>
 <ul>
   <li ng-repeat='item in data | myfilter: search: ignore'>
     {{item.name}} {{item.title}}
   </li>
 </ul>
</div>
</body>

How to ignore property in angular filter

3 Answers3