AngularJS filter only on certain objects

Question

I have the user object defined as below.

$scope.user = [{id: 1, friends:
    [
        {name: 'John', age: 21, sex: 'M'},
        {name: 'Brad', age: 32, sex: 'M'}
    ]
}]

I have the following code:

<input type="text" ng-model="searchText">
<div ng-repeat="friend in user.friends | filter:searchText">
  {{friend.name}} {{friend.age}}
</div>

Here whenever I search, I get results for name, age as well as sex. But I want to search only for name and age and I don't want sex to be searchable. Can anyone help me with how I can achieve this?

Can you update your question with sample query and result you want. In your comment (below) you want one input field to search multiple fields but what type of queries you want to be able to enter? — fredrik
– fredrik, Commented Dec 11, 2012 at 13:25

ricick · Accepted Answer · 2012-12-11 06:34:43Z

21

You can pass an object as the second parameter to achieve this if you can have two search fields

<div ng-repeat="friend in user.friends | filter:{name:searchNameText, age:searchAgeText}">

Otherwise you'll need to write a custom filter to use the same field for both, or pass a custom filter function as the third parameter which is described in the docs.

http://docs.angularjs.org/api/ng.filter:filter

answered Dec 11, 2012 at 6:34

ricick

5,7763 gold badges29 silver badges37 bronze badges

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

1 Comment

Chubby Boy Over a year ago

Thanks much ricick! But I can't have two search fields. Can you help me with how i can use the same field for both?

fredrik · Accepted Answer · 2012-12-11 13:44:13Z

16

I'm not sure if this is what you are after. If you want to have one input field to matched multiple properties you need a filter function to be passed to filter.

$scope.user = {id: 1, friends: [{name: 'John', age: 21, sex: 'M'}, {name: 'Brad', age: 32, sex: 'M'}, {name: 'May', age: 64, sex: 'F'}]};

$scope.searchFilter = function (obj) {
    var re = new RegExp($scope.searchText, 'i');
    return !$scope.searchText || re.test(obj.name) || re.test(obj.age.toString());
};

Here's a fiddle example http://jsfiddle.net/fredrik/26fZb/1/

edited Dec 11, 2012 at 13:44

answered Dec 11, 2012 at 13:38

fredrik

17.6k9 gold badges57 silver badges72 bronze badges

3 Comments

Chubby Boy Over a year ago

Thanks much fredrik! Yes, This is what i am looking! But i am having a issue here. I always get $scope.searchText undefined. I am getting only the functions and vars defined inside controller as options for $scope and not getting the ng-model=searchText here in $scope.

fredrik Over a year ago

$scope.searchText will be undefined until you've entered something in the input field. Can you update your question with the complete code you're using?

user1153484 Over a year ago

Is there a way to include special characters in the search. if i type '?' in search field it throws me error 'Invalid regular expression: /?/: Nothing to repeat'

bohem.be · Accepted Answer · 2015-09-11 14:49:53Z

1

This is not the cleanest way to accomplish what you want, but it is the simplest way to accomplish an OR filter using the standard ng-repeat filter.

Controller:

$scope.user = [{id: 1, friends:
    [
        {name: 'John', age: 21, sex: 'M'},
        {name: 'Brad', age: 32, sex: 'M'}
    ]
}]

$scope.buildSearchData = buildSearchData;

function buildSearchData(friend){
    return friend.name + ' ' + friend.age;
}

HTML

<input type="text" ng-model="searchText">
<div ng-repeat="friend in user.friends | filter:{searchData:searchText}"
     ng-init="friend.searchData = buildSearchData(friend)">
  {{friend.name}} {{friend.age}}
</div>

answered Sep 11, 2015 at 14:49

bohem.be

1,8631 gold badge16 silver badges17 bronze badges

Comments

user2008141 · Accepted Answer · 2013-07-10 20:51:02Z

0

"friend in user.friends | json | filter:{something:somethingtext}"

http://docs-angularjs-org-dev.appspot.com/api/ng.filter:json

answered Jul 10, 2013 at 20:51

user2008141

211 bronze badge

Comments

Fireandlight27 · Accepted Answer · 2014-06-20 18:13:55Z

0

Another possible approach is to create an aggregate field that contains the values of all of the fields you want to filter on concatenated and only filter on that.

answered Jun 20, 2014 at 18:13

Fireandlight27

7165 silver badges9 bronze badges

1 Comment

Patrick Over a year ago

I don't love this answer, but it is by far the easiest. Thanks for posting

Collectives™ on Stack Overflow

AngularJS filter only on certain objects

5 Answers 5

1 Comment

3 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related