数组中子元素上的AngularJS过滤器列表

Question

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

(JSFIDDLE)

对象：

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" '>

order by 处理语法“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'">