我怎样才能使Angular的“过滤器”过滤器更深？

Question

Suppose I have some things in an array:

app.controller('ThingsController', function() {
    this.things = [
        {},
        {
            foo: 0,
        },
        {
            foo: -1,
            bar: null,  
        },
        {
            foo: 1,
            bar: { a: true, b: true },
        },
        {
            foo: 2,
            bar: { a: true, b: false },
        },
        {
            foo: 3,
            bar: { a: false, b: true },
        },
        {
            foo: 4,
            bar: { a: false, b: false },
        },
    ];
});

I want do display these things, and be able to filter the list based on some selection criteria. I may want to display only those things whose foo == 2 , or whose bar.a == true , for instance. So, I wire it up to this HTML:

<div ng-init="filterObj = {};">
    foo: <input type="number" ng-model="filterObj.foo" />
    a: <input type="checkbox" ng-model="filterObj.bar.a" />
    b: <input type="checkbox" ng-model="filterObj.bar.b" />
    <input type="reset" ng-click="filterObj = {};" />

    <ul ng-controller="ThingsController as ctrl">
        <li ng-repeat="thing in ctrl.things | filter: filterObj"><!-- content --></li>
    </ul>
</div>

This way, filtering on foo works just fine, but filtering on bar does not work as intended, as you can see for yourself in this jsfiddle . Specifically, setting either of filterObj.bar.a and filterObj.bar.b to either true or false makes the filter match any truthy bar . Filtering through filter: filterObj : true won't work either, since that would filter on exact deep equality (ie filterObj = { bar: { a: true } } wouldn't match any of the above things).

How can I make this filtering deep, so that filterObj = { bar: { a: true } } would match the things above whose foo is 1 or 2 but not the others? Will I need to write my own filter or comparator for this, or is there some trick I can use?

Answer 1

I got it to work using a custom comparator . It got even simpler when I realized there's an underscore function for this exact comparison.

app.controller('ThingsController', function() {
    this.things = [ /* ... */ ];

    this.filterComparator = function(actual, expected) {
        return _.matches(expected)(actual);
    };
});

HTML:

<li ng-repeat="thing in ctrl.things | filter: filterObj : ctrl.filterComparator"><!-- content --></li>