angularjs - filter by multiple models

Question

This seems like it must be simple, I just cannot find the answer.

Let's say I have an array of data, set out like the following:

friends = [{name:'John', age:60, location:'Brighton', street:'Middle Street'},
{name:'Bob', age:5, location:'Brighton', street:'High Street'}];

Now, I want to filter the data based on a text input like so:

<input ng-model="searchText">
<ul>
    <li ng-repeat="friend in friends | orderBy:'name' | filter:searchText">
    {{friend.name}} - {{friend.location}}</li>
</ul>

This works fine but it filters the input text based on every attribute of the friend object (name, age, location and street). I'd like to be able to filter based on name and location only (ignoring age and street). Is this possible without a custom filter?

JB Nizet · Accepted Answer · 2013-10-11 20:49:32Z

7

Yes, it's possible by simply passing a predicate to the filter instead of a string:

<li ng-repeat="friend in friends | orderBy:'name' | filter:friendContainsSearchText">

$scope.friendContainsSearchText = function(friend) {
    return friend.name.indexOf($scope.searchText) >= 0 || friend.location.indexOf($scope.searchText) >= 0
}

answered Oct 11, 2013 at 20:49

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

2 Comments

user2424495 Over a year ago

Thanks, works nicely. Only thing worth mentioning is that I needed to convert the text to lowercase and add if(!$scope.searchText) return 1; to get it to work.

KayakDave Over a year ago

Just to note- adding 'if(!$scope.searchText) return 1;' will cause it to return all results (no filtering) if no search text is entered. This is an upside of this approach over the approach I list if you need that.

Maen · Accepted Answer · 2014-10-15 18:40:47Z

Here is how we do it with a custom filter.

DEMO: http://plnkr.co/edit/q7tYjOvFjQHSR0QyGETj?p=preview)

[array] | search:query:columns:operator

> query: this is the term you are looking for
> columns: an array of the names of the properties you want to look for (if empty, will use the angular filter with query)
> operator: a boolean to switch between OR (true) and AND (false, default)

html

<ul>
  <li ng-repeat="item in list | search:query:['name','location']:operator">
    <pre>{{item | json}}</pre>
  </li>
</ul>

js

app.filter('search', function($filter) {
  return function(input, term, fields, operator) {
    if (!term) {
       return input;
    }

    fields || (fields = []);

    if (!fields.length) {
      return $filter('filter')(input, term);
    }

    operator || (operator = false); // true=OR, false=AND

    var filtered = [], valid;

    angular.forEach(input, function(value, key) {
      valid = !operator;
      for(var i in fields) {
        var index = value[fields[i]].toLowerCase().indexOf(term.toLowerCase());
        // OR : found any? valid
        if (operator && index >= 0) { 
          valid = true; break;
        } 
        // AND: not found once? invalid 
        else if (!operator && index < 0) { 
          valid = false; break;
        }
      }
      if (valid) {
        this.push(value);
      }
    }, filtered);

    return filtered;
  };
});

KayakDave · Accepted Answer · 2013-10-11 20:55:01Z

1

Alternatively you can use:

<li ng-repeat="friend in friends | orderBy:'name' | filter:{ name :searchText}">

answered Oct 11, 2013 at 20:55

KayakDave

24.7k3 gold badges68 silver badges68 bronze badges

3 Comments

Adam Over a year ago

This is probably what you want, except searchText needs quotes around it. filter:{ name: 'searchText' } . This will tell angular that it is a string and not an expression.

KayakDave Over a year ago

Actually @Adam check out this fiddle: jsfiddle.net/Dwesk/1 It doesn't work with quotes, does without.

Adam Over a year ago

You're absolutely right, we wanted an expression in this case, I misunderstood the initial question and answer.

Itay Merchav · Accepted Answer · 2014-04-17 15:41:33Z

-1

You can put several filters just like ....

<div>
    <input ng-model="Ctrl.firstName" />
    <input ng-model="Ctrl.age" />

    <li ng-repeat = "employee in Ctrl.employees | filter:{name:Ctrl.firstName} | filter:{age:Ctrl.age}">{{employee.firstName}}</li>
</div>

edited Apr 17, 2014 at 15:41

answered Apr 17, 2014 at 15:30

Itay Merchav

1,1009 silver badges9 bronze badges

Collectives™ on Stack Overflow

angularjs - filter by multiple models

4 Answers 4

2 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related