CODEWITHSUNDEEP
angularjsangularjs-filter
Ghasem
Ghasem

Reputation: 15573

Filter multiple object properties together in AngularJS

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?

Upvotes: 1

Views: 8553

Answers (3)

Ali Adravi
Ali Adravi

Reputation: 22723

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

Upvotes: 1

JB Nizet
JB Nizet

Reputation: 691685

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>

Upvotes: 5

Ghasem
Ghasem

Reputation: 15573

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>

Upvotes: 0

Related Questions