javascript - 两个嵌套 ng-repeat 上的 Angular 自定义过滤

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