Javascript 如何使用复选框过滤角度智能表中的数据？

我试图用复选框过滤数据，因为我只需要是或否选项

    <div class="col-xs-3">
        <input type="checkbox" data-st-search="option1" checked>
    </div>
    <div class="col-xs-3">
        <input type="checkbox" data-st-search="option2" checked>
    </div>
    <div class="col-xs-3">
         <input type="checkbox" data-st-search="option3" checked>
    </div>
    <div class="col-xs-3">
         <input type="checkbox" data-st-search="option4" checked>
    </div>

---

它只发送最后一个始终打开的指令

您可以使用带有

require:“^stTable”

的指令，然后，当复选框模型更改时，使用

table.search（value，scope.predicate）

或

Laurent
sugest创建一个指令来处理中的复选框。
我根据我的场景调整了他的方法，并得到了以下结果：

Html:

指令：

angular.module('App').directive('stCheckbox', function () {
    return {
        restrict: 'E',
        scope: {
            predicate: '@',
            id: '@',
            text: '@'
        },
        replace: 'true',
        require: '^stTable',
        template:
                '<div class="checkbox checkbox-primary checkbox-inline" ng-click="stCheckChange()">' +
                '<input type="checkbox" id="{{id}}" ng-model="sel" ng-checked="sel">' +
                '<label for="{{id}}"> {{text}}</label>' +
                '</div> ',
        link: function (scope, element, attr, ctrl) {
            scope.stCheckChange = function () {
                scope.sel = !scope.sel;
                ctrl.search(scope.sel, scope.predicate);
            };
        }
    };
})

angular.module（'App'）。指令（'stCheckbox'，函数（）{
返回{
限制：'E'，
范围：{
谓词：'@'，
id:“@”，
正文：“@”
},
替换为：“true”，
要求：“^stTable”，
模板：
'' +
'' +
“{{text}}”+
' ',
链接：函数（范围、元素、属性、ctrl）{
scope.stCheckChange=函数（）{
scope.sel=！scope.sel；
ctrl.search（scope.sel，scope.predicate）；
};
}
};
})

结果:

我解决了，但不是最漂亮的解决办法

<input type="checkbox"
       st-search="option1"
       value="{{modelOption1}}"
       ng-model="modelOption1"
       ng-true-value="true"
       ng-false-value="false"/>



vm.FilterData= function (tableState) {
     console.log(tableState.search)
     //filter logic
};

angular.module('App').directive('stCheckbox', function () {
    return {
        restrict: 'E',
        scope: {
            predicate: '@',
            id: '@',
            text: '@'
        },
        replace: 'true',
        require: '^stTable',
        template:
                '<div class="checkbox checkbox-primary checkbox-inline" ng-click="stCheckChange()">' +
                '<input type="checkbox" id="{{id}}" ng-model="sel" ng-checked="sel">' +
                '<label for="{{id}}"> {{text}}</label>' +
                '</div> ',
        link: function (scope, element, attr, ctrl) {
            scope.stCheckChange = function () {
                scope.sel = !scope.sel;
                ctrl.search(scope.sel, scope.predicate);
            };
        }
    };
})

<input type="checkbox"
       st-search="option1"
       value="{{modelOption1}}"
       ng-model="modelOption1"
       ng-true-value="true"
       ng-false-value="false"/>