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

时间:2017-03-29 10:02:54

标签: javascript angularjs angular-ui-bootstrap smart-table

我尝试使用复选框过滤数据,因为我只需要是或否选项。

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

它始终只发送最后一个

3 个答案:

答案 0 :(得分:1)

Laurent sugest创建一个指令来处理Filtering with a checkbox中的复选框。 我根据我的方案调整了他的方法并获得了以下结果:

HTML:

<div st-pipe="vm.FilterData" st-table="Data">
     <st-checkbox id="IdForClick" text="Text for Label" predicate="ModelName"></st-checkbox>
     <table>
     ...
     </table>
</div>

控制器:

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);
            };
        }
    };
})

结果:

enter image description here

答案 1 :(得分:0)

您可以使用require: '^stTable'指令,然后在复选框模型更改时使用table.search(value, scope.predicate);

OR

<input type="checkbox" data-st-search="option3" ng-true-value="'YES'" ng-false-value="'NO'" checked>

答案 2 :(得分:0)

我解决了,但不是最漂亮的解决方案。

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