angularjs - Angular UI-Bootstrap Multiple Checkboxes Filter

Question

I want to filter my data with multiple checkboxes. One variable can have multiple filters.

Here is the link

So for example when 4 and 5 are checked, all 4s and 5s are shwon.

html:

<div class="btn-group" data-toggle="buttons-checkbox">
    <pre>{{checkboxes}}</pre>
    <companies ng-repeat="check in checkboxes">
      <button type="button" class="btn"  ng-model="check.truth" 
      btn-checkbox-true="check.value" btn-checkbox>{{check.value}}</button>
    </companies>
</div>

and js:

$scope.checkboxes = [{"value":"1","truth":false},{"value":"2","truth":false}, {"value":"3","truth":false},{"value":"4","truth":false}];


$scope.data = [{"name":"Some Name","value":"1"},{"name":"Another Name","value":"2"},{"name":"Cool Name","value":"3"},{"name":"Funky Name","value":"4"}]

Answer 1

您可以创建自定义过滤器

<tr ng-repeat="d in data | myfilter:checkboxes">

app.filter('myfilter', function () {
    return function (data, values) {
        var vs = [];
        angular.forEach(values, function (item) {
            if ( !! item.truth) {
                vs.push(item.value);
            }
        });

        if (vs.length === 0) return data;

        var result = [];
        angular.forEach(data, function (item) {
            if (vs.indexOf(item.value) >= 0) {
                result.push(item);
            }
        });
        return result;
    }
});

Working Demo