Filter multiple object properties together in AngularJS

Question

I have an object in my controller

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = [{"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"}, 
{"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"}, 
{"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"},
 {"Name":"Around the Horn","City":"London","Country":"UK"}, 
{"Name":"B's Beverages","City":"London","Country":"UK"}];
});

I want to filter Name, Country at the same time.

Name:<input type="text" ng-model="name"> 
Country:<input type="text" ng-model="country"> <br>
 <table>
<tr ng-repeat="x in names | filter: name | filter: country">
   <td>{{ x.Name }}</td>
   <td>{{ x.Country }}</td>
</tr>
</table>

But both input boxes apply filter on both columns.

How to set the name input only to the first column and the country input, only to the second column?

JB Nizet · Accepted Answer · 2015-04-27T15:32:08.333

5

To filter on a specific property foo, you need to pass an object which has a property foo containing the string to match.

Name:<input type="text" ng-model="criteria.Name"> 
Country:<input type="text" ng-model="criteria.Country"> <br>

<table>
<tr ng-repeat="x in names | filter: criteria">
   <td>{{ x.Name }}</td>
   <td>{{ x.Country }}</td>
</tr>
</table>

edited Apr 27 '15 at 15:32

answered Apr 27 '15 at 15:25

JB Nizet

678,734
91
1,224
1,255

I've fixed the property names. It should work fine now. Properties usually start with a lowercase letter in JavaScript, hence my error. – JB Nizet Apr 27 '15 at 15:33
https://stackoverflow.com/questions/51083292/how-to-do-ng-repeat-with-filter-using-angularjs – its me Jun 28 '18 at 14:04

score 1 · Answer 2 · edited May 23 '17 at 12:09

We can use any number of property like this:

<tr ng-repeat="item in filtered = (names | filter : {Name : name, 
                  City: city, 
                  Country: country })">

See the demo on codepen

Or we can use the object, but make sure when creating the object, ng-model property in object and property in result must match the name as well as the case and use the logic suggested by JB Nizet

Let's say I want to search on all the three property name, city and country then I will create the html like this

<div class='form-group'>
    <div class='row'>
       <div class="right-inner-addon col-md-4 ">        
        <input type="search" ng-model='model.Name' class="form-control" placeholder="Name">
       </div>
       <div class="right-inner-addon col-md-4 ">        
        <input type="search" ng-model='model.City' class="form-control" placeholder="City">
      </div>
       <div class="right-inner-addon col-md-4 ">        
        <input type="search" ng-model='model.Country' class="form-control" placeholder="Country">
      </div>
    </div>
</div>

I can use the filter like

<tr ng-repeat="item in filtered = (names | filter : model)">

See the working demo here

For other filter tricks see

score 0 · Answer 3 · answered Apr 27 '15 at 15:29

I've found my answer. All I have to do was to change the html part to this

Name:<input type="text" ng-model="name.Name"> 
Country:<input type="text" ng-model="country.Country"> <br>
 <table>
<tr ng-repeat="x in names | filter: name | filter: country">
   <td>{{ x.Name }}</td>
   <td>{{ x.Country }}</td>
</tr>
</table> 
</div>

Filter multiple object properties together in AngularJS

3 Answers3

Linked