Angular JS - ng-repeat filter object array based on multiple object properties using the same ng-model

Question

I have an array of employees that look like

$scope.Arr = [
           {'name':'John','title':'CEO','Age':'32'}, 
           {'name':'Jill', 'title':'Sales Executive', 'Age':'44'},
           {'name':'Alex','title':'Developer','Age':24}
          ];

I use ng-repeat to render this array in html and am looking to make the filter work such that the same input control's value can be used to filter employees based on both the name as well as title.

<input type='text' data-ng-model='search.name' />

<div>
  <span data-ng-repeat="emp in Arr | filter:search">
  <p> {{emp.name}} </p>
  <p> {{emp.title}} </p>
  </span>
</div>

The above code only lets me filter on basis of employee name

You wanted to filter items based on what is given in the input box am I right? (not just name attribute) — Janaki Sathiyamurthy
– Janaki Sathiyamurthy, Commented Jun 12, 2015 at 5:55
Change it to filter:search.name. Note that it will compare the model value to all properties, not just name and title — Phil
– Phil, Commented Jun 12, 2015 at 5:58
@Swayam here is plunker plnkr.co/edit/Fni3pDdOvYA8B7IpRCzD?p=preview. Simple use search.name in filter. — squiroid
– squiroid, Commented Jun 12, 2015 at 6:01
@squiroid @phil I am trying to filter emp based on both name and title with the search model. search instead of search.name works just fine — Swayam Siddha
– Swayam Siddha, Commented Jun 12, 2015 at 6:06

akashrajkn · Accepted Answer · 2015-06-12 06:11:28Z

2

You can use filter to search based on both name and title.

The default angularjs filter on the expression "emp in Arr | filter: {name: $select.search, title: $select.search}" performs an AND between "name: $select.search" and "title: $select.search"

Write a custom filter to perform OR operation

var app = angular.module('myApp', []);

app.filter('customFilter', function() {
    return function(names, title) {
        var output = [];

        if(angular.isArray(names)) {
            names.forEach(function(item) {
                var nameMatch = false;

                var keys = Object.keys(title);
                for(var i=0; i<keys.length; ++i) {
                    var t = keys[i];
                    var text = title[t].toLowerCase();
                    if(item[t].toString().toLowerCase().indexOf(text) !== -1) {
                        nameMatch = true;
                        break;
                    }
                }

                if(nameMatch) {
                    output.push(item);
                }
             });
          }
          else {
              output = names;
       }

       return output;
   };
});

Basically, this code lets you filter based on both name and title. Hope this helps.

answered Jun 12, 2015 at 6:11

akashrajkn

2,3232 gold badges24 silver badges47 bronze badges

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

1 Comment

akashrajkn Over a year ago

I've made a plunker -> plnkr.co/edit/VzqvgYCesmsNRMWfEakk?p=preview .... I hope this is what you require. In the select box, you can search based on "name" and "title". 'demo.js' has the "customFilter" defined

Collectives™ on Stack Overflow

Angular JS - ng-repeat filter object array based on multiple object properties using the same ng-model

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related