在AngularJS中一起过滤多个对象属性

Question

我的控制器中有一个对象

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"}];
});

我想同时过滤Name、Country。

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>

但两个输入框都对两列应用过滤器。

如何将name 输入仅设置为第一列，country 输入仅设置为第二列？

Answer 1

要过滤特定属性foo，您需要传递一个对象，该对象的属性foo 包含要匹配的字符串。

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>

Answer 2

我们可以像这样使用任意数量的属性：

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

See the demo on codepen

或者我们可以使用对象，但要确保创建对象时，对象中的ng-model属性和结果中的属性必须匹配名称和大小写，并使用JB Nizet建议的逻辑

假设我想搜索所有三个属性名称、城市和国家，然后我将创建这样的 html

<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>

我可以像

一样使用过滤器

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

See the working demo here

对于其他filter tricks see

Answer 3

我找到了答案。我所要做的就是将html 部分更改为此

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>