javascript - 如何过滤表中的二级ng-repeat

Question

我有一个包含对象的数组，我想将其显示为带有过滤器 的表。我的模型 name 过滤器正在过滤深度 object family。这工作正常，但不是我想要的工作方式......

我想要的将字符串插入input，例如'妈妈'。现在，我希望它显示 family 中匹配 'Ma' 的所有包含 string 的项目 - 这意味着我想保留所有只要匹配一个字符串就显示家庭成员。在我的示例中，这将是过滤后的结果:

Homer    Marge, Bart, Lisa, Maggie
Ned      Maude, Rod, Todd

带有以下代码片段的示例代码:

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {
    $scope.tableData = [
        {id: 1, name: 'Homer', family: ['Marge', 'Bart', 'Lisa', 'Maggie']},
        {id: 2, name: 'Carl', family: []},
        {id: 3, name: 'Lenny', family: []},
        {id: 4, name: 'Clancy', family: ['Sarah', 'Ralph']},
        {id: 5, name: 'Ned', family: ['Maude', 'Rod', 'Todd']},
        {id: 6, name: 'Moe', family: []}
    ];
});

table td {
    padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <table>
        <tr>
            Filter family members: <input type="text" ng-model="name">
        </tr>
        <tr ng-repeat="item in tableData">
            <td>{{item.name}}</td>
            <td>
                <span ng-repeat="member in item.family | filter: name">
                    {{member}}{{$last ? '' : ', '}}
                </span>
            </td>
        </tr>
    </table>
</div>

Answer 1

你需要过滤第一个ng-repeat:

<tr ng-repeat="item in tableData | filter: name && {family: name}">

关键是提供您要过滤的属性的名称。这是属性 family。

参见 fiddle (在搜索框中输入 ma)

编辑:并删除您放置在内部 ng-repeat

上的过滤器