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

How to filter second level ng-repeat in table

本文关键字：二级 ng-repeat 何过滤 过滤      更新时间：2023-09-26

我有一个数组对象我想显示为table与filter。模型为name的滤波器正在过滤深度对象 family。这工作很好，但不是我想要的工作方式…

我想要的:插入字符串到input，例如。"马"。现在，我希望它显示包含字符串在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>

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

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

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

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

编辑:并删除您在内部ng-repeat上放置的滤镜

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

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

你需要条件，因为如果你添加一个过滤器并删除它，空数组将不会被考虑(角怪)。

我在这里创建了一个工作小提琴

你想在top -repeat上使用一个自定义过滤器。您可以指定一个函数作为过滤器:自定义过滤器答案。在这个自定义过滤器中，返回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;
    };
};

是否尝试在tableData中使用过滤器??像这样:

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

和

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

相关文章：