current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I have the user object defined as below.

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

I have the following code:

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

Now when i type in the textbox 'searchText', I want the filter to match for name of user or name/age of friend alone. Can anyone help me with how i can achieve this? If i am write i need to write a custom filter for this purpose or is there any other way i can get this?

share|improve this question
add comment

2 Answers

up vote 2 down vote accepted

Because you want to filter on two things at once -- some properties of the friends array and also the user -- you'll need to create your own custom filter that accepts 2 additional parameters:

myApp.filter('myFilter', function() {
  return function(friends, searchText, username) {
    var searchRegx = new RegExp(searchText, "i");
    if ((searchText == undefined) || (username.search(searchRegx) != -1)) {
        return friends;
    }
    var result = [];
    for(i = 0; i < friends.length; i++) {
        if (friends[i].name.search(searchRegx) != -1 || 
            friends[i].age.toString().search(searchText) != -1) {
            result.push(friends[i]);
        }
    }
    return result;
  }
});

Then call it like so:

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

":searchText:user.name" is the way you pass additional arguments to a custom filter.

Fiddle.

share|improve this answer
    
Thanks Very much Mark! But this filterFilter(friends, searchText) will filter on all objects of friends i.e, name, age and sex or else only name and age. My requirement is i want only 'name' and 'age' to be searchable and results to be filtered only on these two objects of friends, as those are the fields getting displayed and not on 'sex' –  JSWorld Dec 13 '12 at 5:59
    
See updated answer. –  Mark Rajcok Dec 13 '12 at 15:50
    
I realize how old this is... but what might be happening when my input's 'searchText' is always undefined inside of the filter? Scoping issues, obviously, but why? –  Clever Sep 12 '13 at 20:12
    
@Clever, I suggest you create a new question that includes your HTML and the filter. –  Mark Rajcok Sep 13 '13 at 15:48
add comment
up vote 1 down vote

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

<div ng-repeat="user in users>
 <input type="text" ng-model="search.$">
 <div ng-repeat="friend in user.friends | filter:search">
  {{user.name}} {{friend.name}} {{friend.age}}
 </div>
</div>
share|improve this answer
    
Thanks fastreload! This helps! But what are the object this will filter for? Will this filter only on user's name and friend's name and age? –  JSWorld Dec 12 '12 at 8:57
    
As described in the documentation, it would search for all properties of an objects inside an array of objects. You can think of $ as a magic wildcard. –  Umur Kontacı Dec 12 '12 at 11:03
    
Thanks fastreload! Here in my friend object I have three attributes: name, age and sex. But i don't want the sex to be searchable. Is there a way i can achieve this? –  JSWorld Dec 12 '12 at 11:05
    
You need to create a function that takes an element in the array and result true/false depending on your needs, and pass the function name as filters parameter. "function: A predicate function can be used to write arbitrary filters. The function is called for each element of array. The final result is an array of those elements that the predicate returned true for." –  Umur Kontacı Dec 12 '12 at 11:11
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.