两个嵌套的 ng-repeat 上的角度自定义过滤答案

【问题标题】：Angular custom filtering on two nested ng-repeat两个嵌套的 ng-repeat 上的角度自定义过滤
【发布时间】：2015-01-22 12:08:54
【问题描述】：

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

[
{
    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 - Bla-Bla 2

...

乔尼·布拉沃

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

...

瑞奇·兰伯特

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

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

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

【问题讨论】：

标签： javascript arrays angularjs filtering nested-lists

【解决方案1】：

添加

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

【讨论】：

感谢您的回答。实际上我不想遍历所有内容然后显示或隐藏它，所以这就是我没有选择这种方法的原因。 :)
无论如何你应该循环过滤它

【解决方案2】：

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

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

【讨论】：

是的，就是这样。但是，如果我使用一些自定义过滤，这种方法对我没有帮助。例如，如果我检查客户名字和被叫号码，这对我没有帮助。
您为什么不尝试阅读我链接的文档？提供多个属性值就像提供一个一样容易。

【解决方案3】：

您可以通过多种不同的方式完成此操作：使用 filter、ng-if 或 ng-hide 只是其中的一小部分。

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

filter vs ng-hide

【讨论】：

太好了，我会检查文章。也许我的问题没有得到很好的解释 - 我想添加一些自定义过滤器，因为我想扩展所有过滤功能。所以也许将来我必须检查调用对象中的更多“键”。在那种情况下，filter、ng-if 或 ng-hide 对我有用吗？
为简单起见，我建议您使用filter。您可以将对象、字符串或函数传递给 filter 参数以评估多个条件。类似filter: {name: 'Jon', number: 123}