How to use angular filter on multiple properties of the object

Question

I have a simple ng-repeat like that:

<input type="text" ng-model="vm.filter">

<div ng-repeat="tenant in vm.tenants | filter : vm.filter : vm.contains">
 </div>

Now I want to filter tenants based on the value of the filter, e.g. to find if a name of a tenant contains the filter expression like that

function contains(actual, expected) {
            return actual.name.indexOf(expected) >= 0;
        }

What I do not understand is why I get a tenant.name in the contains function instead of the tenant itself. I know for a simple case I can do something like filter | {name: vm.filter} | vm.contains, but what if I want to do filtering based on multiple properties (e.g. name, phone, etc.)

potatopeelings · Accepted Answer · 2016-04-14 14:23:44Z

1

What I do not understand is why I get a tenant.name in the contains function instead of the tenant itself.

What's happening is that angular is providing the comparator all levels of the object in an attempt to do a deep filtering i.e. it attempts to match your filter to all hierarchy levels in the object. If you console.log all the values, you'll see that you get the full object too (after all the properties).

One way to make this work would be something like

...
<div ng-repeat="tenant in vm.tenants | filter : vm.contains(vm.filter)">
...

and then

...
contains: function(filter) {
  return function(tenant) {
    return tenant.name.indexOf(filter) !== -1;
  }
}
...

Fiddle - https://jsfiddle.net/81384sd7/

edited Apr 14, 2016 at 14:23

answered Apr 14, 2016 at 14:07

potatopeelings

41.2k8 gold badges97 silver badges121 bronze badges

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

3 Comments

Ilya Chernomordik Over a year ago

Yes, I figured that out by debugging that it is doing deep comparison. Is there a way to not do it? I want to have my custom logic in the provided function based on the object itself, but it seems not possible for some reason

potatopeelings Over a year ago

You could put your filtering function as the 1st parameter to filter and directly use the vm.filter from the scope or do something like jsfiddle.net/u9rq7afk (type in abc to get the 2 matching tenants)

Ilya Chernomordik Over a year ago

Yes, thanks that seems to do the trick, I have missed that the expression parameter can accept the function itself.

Community · Accepted Answer · 2017-05-23 11:50:38Z

1

You can use an object to store the filters you want to apply. For example:

$scope.filterBy = {
  name: "Bob",
  phone: "07"
};

Then configure fields to edit the filters:

<input type="text" ng-model="filterBy.name" />
<input type="text" ng-model="filterBy.phone" />

Then just filter by this object.

<div ng-repeat="tenant in vm.tenants | filter : filterBy">

Take a look at my previous answer which is very similar except also allows selections to be made before a filter being applied manually with a button:

Applying a angularjs filter after "Apply" button click

I hope this helps.

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Apr 14, 2016 at 14:06

Adam Nierzad

9326 silver badges19 bronze badges

5 Comments

Ilya Chernomordik Over a year ago

While that will probably work if I create a specially crafted object with duplicate of my string, but I really want to have the same string matched against various properties of one object.

Adam Nierzad Over a year ago

So you want to see if for example "Bob" exists in tenant.name, tenant.phone, etc? Essentially if it matches any property? If so, I believe that is the standard functionality if you just pass filter a string.

Ilya Chernomordik Over a year ago

Yes, that's correct, but I don't want any, since there might be internal properties, properties that are not related, etc. That's why I just added my own function for that.

Ilya Chernomordik Over a year ago

Thanks for help, I did not really understand that passing a filter string will do case insensitive contains for a property instead of equal, and then I can do e.g. this "user in users | filter:{name: search, phone: search}" to match it against multiple properties. I actually ended up with this simple solution, but the accepted answer was more to the point to the original problem :)

Adam Nierzad Over a year ago

No problem, glad you got it sorted :).

Brett DeWoody · Accepted Answer · 2016-04-14 13:57:56Z

0

You'll want to test for the presence of both those conditions and return the value if both are present. Something like this:

function contains(actual, expected) {
  if (actual.name.indexOf(expected) >= 0 && actual.phone.indexOf(expected) >= 0) {
    return actual;
  }
}

edited Apr 14, 2016 at 13:57

answered Apr 14, 2016 at 13:56

Brett DeWoody

63.3k31 gold badges145 silver badges192 bronze badges

3 Comments

Ilya Chernomordik Over a year ago

The problem is not that I cannot test for both inside the function, but that angular gives me properties in the object, instead of the object itself...

Brett DeWoody Over a year ago

I corrected a mistake in the solution. It sounds like you need to return the entire actual object instead of the single property.

Ilya Chernomordik Over a year ago

The actual object does not exist at all unfortunately. I would expect actual to be e.g. { name: "1", phone "2"}, instead I get "1" right away in the contains function

Collectives™ on Stack Overflow

How to use angular filter on multiple properties of the object

3 Answers 3

3 Comments

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related