Question

我正在尝试在列表上创建一个简单的AngularJS过滤器。但是，我想要过滤的元素是数组中的子元素。

对象：

elements = [{
    'claim': [{value:'foo'}],
    class: 'class1',
    subject: 'name1'
}, {
    'claim':  [{value:'bar'}],
    class: 'class1',
    subject: 'name2'
}, {
    'claim':  [{value:'baz'}],
    class: 'class1',
    subject: 'name2'
}, {
    'claim':  [{value:'quux'}],
    class: 'class1',
    subject: 'name3'
}];

HTML：

<tr class='claimrow' 
    data-ng-repeat='c in elements | filter:{claim[0].value:srcBoxFilter} | orderBy: "claim[0].value" '>

顺序处理语法“claim [0] .value”但过滤器没有。

这会产生错误：

Error: Syntax Error: Token '[' is unexpected, expecting [:] 
at column 25 of the expression 
[elements | filter:{claim[0].value:srcBoxFilter} | orderBy: "claim[0].value"] 
starting at [[0].value:srcBoxFilter} | orderBy: "claim[0].value"].

Answer 1

有趣的问题。特别是因为嵌套数组值适用于排序但不适用于过滤。我和你的JSFiddle打过一场比赛并且无法开箱即用。您可以通过编写自己的过滤器轻松解决这个问题。

我updated your JSFiddle展示了如何做到这一点。我对您的代码所做的唯一更改如下所示：

<强>的JavaScript

myApp.filter('byFirstClaimValue', function () {
    return function (items, filterText) {
        if(!filterText)
            return items;

        var out = [];
        for (var i = 0; i < items.length; i++) {
            if (items[i].claim[0].value.toLowerCase().indexOf(filterText.toLowerCase()) > -1) {
                out.push(items[i]);
            }
        }
        return out;
    }
});

<强> HTML

<tr class="claimrow" data-ng-repeat="c in elements | byFirstClaimValue:srcBoxFilter | orderBy: 'claim[0].value'">

AngularJS过滤器列表中的子元素

1 个答案: