在Angular中过滤列表时如何显示两个属性答案

【问题标题】：How to show two properties when filtering a list in Angular在Angular中过滤列表时如何显示两个属性
【发布时间】：2017-12-06 14:06:03
【问题描述】：

我试图显示一个对象的两个属性。为此，我使用另一个属性从数组中过滤。我在这里找到了一个解决方案，但它只适用于单个属性。

这是一个示例代码

controller.js
$scope.people= [{name, last_name, code}, {name, last_name, code}];

view
<tr ng-repeat="item in transactions | filter:search">
  <td>{{(people| filter : {code:item.person_code}:true)[0].name}}</td>
</tr>

我希望不仅能显示姓名，还能显示姓氏。如果可能，用逗号分隔。

现在它可以工作，但我只显示名称，我不知道如何显示多个属性。

这有可能吗？？？

【问题讨论】：

在 Angular js 2 中我喜欢 {{item.name}} : {{item.last_name}}
@PranayRana 在 ng1 中相同 :)
查看这个有效的 Plnkr plnkr.co/edit/sjUqjP74eiMnp5b4SIRq 它是否符合您的需要？
如果我必须显示的信息位于与我正在迭代的不同的数组中，那就太好了。我想从人们的数组中显示一个人的姓名和姓氏......但是 ng-repeat 用于交易的数组。项目没有属性 name 也没有 last_name。

标签： angularjs filter

【解决方案1】：

您应该将filters 结果存储到temp 变量中，然后使用它来显示所需的属性：

<tr ng-repeat="item in transactions | filter : search">
    <td ng-init='temp = (people | filter : {code:item.person_code}:true)[0]'>
         {{temp.name}} {{temp.last_name}}
    </td>
</tr>

【讨论】：

【解决方案2】：

请试试这个。

数据：

$scope.people= [{name:"SUN", last_name:"SS", code:"101"}, 
 {name:"MOON", last_name:"MM", code:"103"},{name:"ION", 
 last_name:"IO", code:"105"}];
$scope.transactions= [{person_code:"105"}, {person_code:"103"}];

过滤器：

filter('pFilter',function(){
return function(input,trans) {
var result =[];
angular.forEach(trans,function(item){
angular.forEach(input,function(p){
if(p.code == item.person_code)
result.push(p);
});
});
return result;
}
})

HTML：

   <input ng-model="search"/>
   <table>
    <tr ng-repeat="p in people | filter:search|pFilter:transactions ">
    <td>{{$index +1}}. {{p.name}}: {{p.last_name}}</td>
   </tr>
   </table>

如果数据很大并且您想在表格中显示更多内容，希望这能奏效。

【讨论】：