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

AngularJS filter list on sub element in array

本文关键字：过滤 列表 元素 数组 AngularJS      更新时间：2023-09-26

我试图在列表上创建一个简单的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]"。值"，但过滤器没有。

生成一个错误:

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"].

有趣的问题。特别是因为嵌套的数组值用于排序而不是过滤。我尝试了一下您的JSFiddle，但无法从盒子中获得任何工作。你可以很容易地通过编写自己的过滤器来解决这个问题。

我已经更新了您的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;
    }
});

相关文章：