filting through 2 properties using custom filter angularjs

Question

I am trying to filter through multiple properties in Angular. I am able to filter through one property easily by using an angular filter:{ title: searchString } but to filter through a multiple properties... i created my own custom filter which tries to match the search string by any of the properties in the array.

What I need to do is:

If John Wayne is passed through.. it shows John Wayne but if only John or only Wayne is passed through... It still shows John Wayne. Similarly for n w since John ends with an n and subTitle starts with a w

PS: I can only have one ng-model

HTML:

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

<div ng-repeat="tel in arr1 | customFilter: searchString:['title','subTitle']"></div>

JS:

$scope.arr1 = [
    {title: 'John', subTitle:'Wayne'}
    {title: 'Barry'}
];

.filter('customFilter',[ function() {
    return function(items, searchText, attrs) {
        var filtered = [];
        var filteredItems = items.map(function(item) {
            angular.forEach(attrs, function(attr) {
                if (item.hasOwnProperty(attr)) {
                    filtered.push(item);
                }
            });
        });
        return filtered;
  };
}])

My issue is that I am getting an error saying:

Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: tel in arr1

You have an error in the name of your filter: customFilter in your filter name and custommFilter in your html — Manu Obre
– Manu Obre, Commented Jan 5, 2017 at 17:01
@ManuelObregozo whoops.. that was a typo. Accidentally inserted that in the post but thats not the issue — user4756836
– user4756836, Commented Jan 5, 2017 at 17:03
I still do get what it the idea of the filter, what is the output, of your array? — Manu Obre
– Manu Obre, Commented Jan 5, 2017 at 17:18
@ManuelObregozo basically... whatever is typed in the search field... i want it to be matched against all properties of the array — user4756836
– user4756836, Commented Jan 5, 2017 at 17:20

Manu Obre · Accepted Answer · 2017-01-05 18:05:20Z

1

I just made a few updates to your custom filter:

app.filter('customFilter',[ function() {
    return function(items, searchText, attrs) {
        var filtered = []; 
        for (var i in items){
          var keepGoing = true;
          angular.forEach(attrs, function(attr) {
            console.log(items[i][attr])
                if (items[i].hasOwnProperty(attr) && items[i][attr].includes(searchText)  && keepGoing) {
                    filtered.push(items[i]);
                    keepGoing=false;
                }
            });
        }

        return filtered;
  };
}])

Take into account that in this case it is case-sensitive.

Although it is working as expected, I feel like it can be improved.

Plunker Sample: https://plnkr.co/edit/YnkSSOpG8sBQvVChIIuP?p=preview

edited Jan 5, 2017 at 18:05

answered Jan 5, 2017 at 17:28

Manu Obre

2,3041 gold badge14 silver badges12 bronze badges

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

4 Comments

user4756836 Over a year ago

I tried that before as well :(... but in your example it doesn't work when i type "wayne"

user4756836 Over a year ago

which is what led me to creating a custom filter

Manu Obre Over a year ago

the match condition could be a substring aswell?

Manu Obre Over a year ago

plnkr.co/edit/YnkSSOpG8sBQvVChIIuP?p=preview seems to be working as expected, please check. take into account that it is case-sensitive. If you do not want it to be like that, just transform the item to lower case. hope it helps

Ram_T · Accepted Answer · 2017-01-05 17:03:35Z

1

You are getting this error because of duplicates in the arr1. Just add track by $index to achieve the desired solution

<div ng-repeat="tel in arr1 track by $index | custommFilter: searchString:['title','subTitle']"></div>

answered Jan 5, 2017 at 17:03

Ram_T

8,50411 gold badges42 silver badges64 bronze badges

2 Comments

user4756836 Over a year ago

error is gone when i insert track by at the end... but now it doesn't do what i want it to do... it doesn't filter correctly

Ram_T Over a year ago

filter either with title or sub title at a time. How can you do with both at a time?

Collectives™ on Stack Overflow

filting through 2 properties using custom filter angularjs

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related