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-27 15:32:08Z

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, 2015 at 15:32

answered Apr 27, 2015 at 15:25

JB Nizet

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

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

2 Comments

JB Nizet Over a year ago

I've fixed the property names. It should work fine now. Properties usually start with a lowercase letter in JavaScript, hence my error.

its me Over a year ago

stackoverflow.com/questions/51083292/…

Community · Accepted Answer · 2017-05-23 12:09:06Z

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

Ghasem · Accepted Answer · 2015-04-27 15:29:50Z

0

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>

answered Apr 27, 2015 at 15:29

Ghasem

15.8k27 gold badges151 silver badges192 bronze badges

Collectives™ on Stack Overflow

Filter multiple object properties together in AngularJS

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related