Question

我有一个对象的数组 ，我想用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>

Answer 1

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

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

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

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

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

上的过滤器

Answer 2

您想在顶部ng-repeat上使用自定义过滤器。您可以将函数指定为过滤器：Bigger and Imporved XXXL Free plan。在此自定义过滤器中，返回tableData中包含子数组中匹配项的所有项。

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

示例：custom filter answer

QueryType

...

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

Answer 3

通过在第一个ng-repeat上提供条件过滤器，您可以在没有自定义过滤器的情况下解决此问题。例如：

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

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

我创造了一个工作小提琴here

Answer 4

您是否尝试在tableData中使用过滤器？像这样：

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

和

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

如何过滤表

4 个答案: