如何在 table 中过滤二级 ng-repeat

Question

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

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

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

您尝试使用tableData中的过滤器吗？？像这样：

<input type="text" ng-model="family">

和

<tr ng-repeat="item in tableData | filter: family">

Answer 2

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

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

关键是提供要筛选的属性的名称。这里是属性 family.

参见fiddle（在搜索框中输入ma）

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

上的过滤器

Answer 3

您想在顶部 ng-repeat 上使用自定义过滤器。您可以指定一个函数作为过滤器：custom filter answer。在此自定义过滤器中 return tableData 中包含子数组中匹配项的所有项目。

注意：您可以使用 lodash 来帮助进行此计算。

示例：plunkr example

<tr ng-repeat="item in tableData | filter:criteriaMatch(name)">

...

$scope.criteriaMatch = function( criteria ) {
    return function( item ) {
        if(!angular.isDefined(criteria) || criteria === "")
            return true;

        var results = _.filter(item.family, function(n) {
           if(_.contains(n.toUpperCase(), criteria.toUpperCase()))
           {
             return true;
           }
        });

        if(results.length !== 0)
          return true;

        else  return false;

    };
};

Answer 4

您可以通过在第一个 ng-repeat 上提供条件过滤器来解决此问题而无需自定义过滤器。例如：

<tr ng-repeat="item in tableData | filter: (name.length > 0 || '') && {family: name}">

您需要条件，因为如果您添加和删除过滤器，将不会考虑空白数组（angular 怪癖）。

我创建了一个工作 fiddle here

如何在 table 中过滤二级 ng-repeat

How to filter second level ng-repeat in table

javascript

angularjs

angularjs-ng-repeat

angularjs-filter