Angular UI-Bootstrap多个复选框过滤器

Question

我想用多个复选框过滤我的数据。一个变量可以有多个过滤器。

Here is the link

因此，例如，当检查4和5时，所有4和5都是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>

和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