在AngularJS中将多个对象属性一起过滤 [英] 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"}];
});

我想同时过滤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>

但是两个输入框都会在两列上应用过滤器.

But both input boxes apply filter on both columns.

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

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

推荐答案

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

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>

这篇关于在AngularJS中将多个对象属性一起过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！