对两个嵌套的ng重复进行角度自定义过滤

Angular custom filtering on two nested ng-repeat

本文关键字：过滤 自定义 ng 两个 嵌套      更新时间：2023-09-26

>我有一个这样的数组数据：

[
{
    firstName: "John",
    lastName: "Adams",
    calls: [
        {
            date: "2014-08-13",
            number: 123456789,
            operatorName: "Bla-Bla 1"
        },
        {
            date: "2014-08-18",
            number: 987654321,
            operatorName: "Bla-Bla 2"
        },
        {
            date: "2014-11-06",
            number: 123456543,
            operatorName: "Bla-Bla 1"
        },
        {
            date: "2014-10-15",
            number: 987654567,
            operatorName: "Bla-Bla 3"
        }
    ]
},
{
    firstName: "Jonnie",
    lastName: "Bravo",
    calls: [
        {
            date: "2014-05-09",
            number: 534535367,
            operatorName: "Bla-Bla 1"
        },
        {
            date: "2014-01-25",
            number: 089086464,
            operatorName: "Bla-Bla 1"
        }
    ]
},
{
    firstName: "Ricky",
    lastName: "Lambert",
    calls: [
        {
            date: "2014-10-19",
            number: 147258369,
            operatorName: "Bla-Bla 3"
        },
        {
            date: "2014-11-01",
            number: 798908645,
            operatorName: "Bla-Bla 2"
        },
        {
            date: "2014-11-05",
            number: 312315367,
            operatorName: "Bla-Bla 3"
        }
    ]
}
]

我正在使用 Angular 像这样遍历所有客户：

<div ng-repeat="customer in customers">
    <span ng-repeat="call in customer.calls">
        <span class="name">{{ customer.name }}</span>
        <span class="info">{{ call.date }} - {{ call.number }} - {{ call.operatorName }}</span>
    </span>
</div>

输出是这样的：

约翰·亚当斯

2014-08-13 - 123456789 - Bla-Bla 1

约翰·亚当斯

2014-08-18 - 987654321 - 布拉布拉2

。

琼妮·布拉沃

2014-05-09 - 534535367 - Bla-Bla 1

。

瑞奇·兰伯特

2014-11-05 - 312315367 - Bla-Bla 3

我现在遇到的问题是我想过滤数据以显示所有调用运算符Bla-Bla 1的用户。我搜索了嵌套的ng重复，但没有任何帮助。请记住，我希望我的数据像这样显示。

希望你能很好地理解我。有什么想法吗？:)

add 

ng-if="call.operatorName=='Blabla 1'"

到第二ngRepeat

您还可以使用过滤器过滤数据：

ng-repeat="call in customer.calls | filter:{operatorName:'Bla-Bla 1'}"

或一些习俗：

ng-repeat="call in customer.calls | operatorF:'Bla-Bla 1'"
$scope.operatorF = function(){
  return function(calls, op) {
    if (!op) return calls;
    return calls.filter(function(call){
      return call.operatorName === op
    });
  };
}

甚至更好：

ng-repeat="call in customer.calls | filter:operator:'Bla-Bla 1'"
$scope.operator = function(call, op){
    if (!op) return true;
    return call.operatorName === op
};

而且你不能不循环。

您也可以手动检查更改并更新过滤集： 

ng-repeat="call in customer.filteredCalls"
$scope.$watch('customer.calls', function(){
  $scope.customer.filteredCalls = $scope.customer.calls.filter(myFilterFn);
});

"filter"过滤器应该可以正常工作：

<span ng-repeat="call in customer.calls | filter:{operatorName:'Bla-Bla 1'}">...</span>
您可以通过

各种不同的方式实现此目的：使用filter、ng-if或ng-hide只是其中的几个。

如果您想了解幕后发生的事情以及最适合您的具体情况，这是一个有趣的话题。我建议查看此链接，以简短但很好地解释这些不同"过滤"机制之间的权衡：

过滤器与 ng 隐藏

相关文章：