CODEWITHSUNDEEP
javascriptangularjsangularjs-filter
ed4becky
ed4becky

Reputation: 1620

AngularJS filter list on sub element in array

I am trying to create a simple AngularJS filter on a list. However the element I want to filter on is a sub-element in an array.

(JSFIDDLE)

The objects:

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

The order by handles the syntax "claim[0].value" but the filter does not.

This generates an error: 

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

Upvotes: 3

Views: 1382

Answers (1)

David Spence
David Spence

Reputation: 8079

Interesting problem. Especially because the nested array value works for ordering but not filtering. I had a play with your JSFiddle and couldn't get anything out of the box working. You could get around this very easily by writing your own filter.

I've updated your JSFiddle to show how you could do this. The only changes I made to your code are shown below:

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

Upvotes: 1

Related Questions