Question

我有这样的数组数据：

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

输出是这样的：

John Adams

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

John Adams

2014-08-18 - 987654321 - Bla-Bla 2

...

Jonnie Bravo

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

...
     Ricky Lambert

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

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

希望你能理解我。有任何想法吗？：）

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

Answer 2

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

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

Answer 3

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

如果您想了解幕后发生的事情以及最适合您具体情况的内容，请阅读这个有趣的话题。我建议查看此链接，以获得一些简短但很好的解释，说明这些不同的过滤之间的权衡取舍＆＃34;过滤＆＃34;机制：

filter vs ng-hide

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

3 个答案: