在 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屋！