17

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?

Júlio Griebeler
  • 842
  • 2
  • 8
  • 20
Chubby Boy
  • 30,942
  • 19
  • 47
  • 47
  • 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 Dec 11 '12 at 13:25

5 Answers5

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

ricick
  • 5,694
  • 3
  • 25
  • 37
  • 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? – Chubby Boy Dec 11 '12 at 12:01
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/

fredrik
  • 17,537
  • 9
  • 51
  • 71
  • 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. – Chubby Boy Dec 12 '12 at 04:41
  • $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? – fredrik Dec 12 '12 at 08:54
  • 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' – user1153484 Oct 14 '16 at 09:27
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>
bohem.be
  • 1,763
  • 1
  • 15
  • 17
0

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

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

user2008141
  • 21
  • 1
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.

Fireandlight27
  • 716
  • 5
  • 9