smart-table - 如何重置过滤器集合？答案

【问题标题】：smart-table - how to reset filter collection?smart-table - 如何重置过滤器集合？
【发布时间】：2015-03-23 22:33:13
【问题描述】：

Angular 和智能表的新手..

此智能表设置工作正常且过滤器正确，但尝试重置或清除过滤器不会重新过滤表。为什么不呢？

使用 ng-model 绑定更新输入不会触发 smart-table 正在寻找的手表吗？

Plunker 在这里可用：http://plnkr.co/edit/4os3oWeJtEtMfa89QoQd?p=preview

代码：

        var actionQueue = [
            { Type: 'User Access Request', Description: 'test test test test test test test', DateRequested: '5/5/15' },
            { Type: 'User Access Request', Description: 'blah blah', DateRequested: '3/3/10' },
            { Type: 'Project Approval Request', Description: 'project needs approving', DateRequested: '1/1/08' }
        ];

        $scope.actionQueueCollection = actionQueue;


        $scope.predicates = [{ Name: 'All', Value: '' }, { Name: 'User Access Request', Value: 'User Access Request' }, { Name: 'Project Approval Request', Value: 'Project Approval Request' }];
        $scope.selectedPredicate = $scope.predicates[0];

        $scope.clearFilter = function () {
            $scope.selectedPredicate = $scope.predicates[0];
            $scope.searchFilter = '';

        }

标记：

    <table st-table="actionQueueCollection" >
        <thead>
            <tr>
                <th>
                    <div>
                        <label class="col-sm-1 control-label" for="filterType">Filter: </label>
                        <div class="col-sm-8">
                            <select class="form-control input-sm" id="filterType" name="filterType" ng-model="selectedPredicate" ng-options="predicate.Name for predicate in predicates track by predicate.Value" st-search="Type"></select>
                        </div>
                    </div>
                </th>
                <th colspan="3">
                    <div class="form-horizontal form-group-sm">
                        <div class="input-group col-sm-12">
                            <input st-search placeholder="search" class="form-control input-sm" type="search" ng-model="searchFilter" />
                            <button type="button" class="btn-sm btn-default" ng-click="clearFilter()">CLEAR</button>
                        </div>
                    </div>
                </th>
            </tr>
            <tr>
                <th>Type</th>
                <th>Description</th>
                <th>Date Requested</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="action in actionQueueCollection">
                <td>{{action.Type}}</td>
                <td>{{action.Description}}</td>
                <td>{{action.DateRequested}}</td>
            </tr>
        </tbody>
    </table>

【问题讨论】：

检查这个与你的类似的方法github.com/lorenzofox3/Smart-Table/issues/164

标签： angularjs smart-table

【解决方案1】：

几乎是一样的。这种方式使用起来会容易一些

.directive("stResetSearch", function() {
         return {
                restrict: 'EA',
                require: '^stTable',
                link: function(scope, element, attrs, ctrl) {
                  return element.bind('click', function() {
                    return scope.$apply(function() {
                      var tableState;
                      tableState = ctrl.tableState();
                      tableState.search.predicateObject = {};
                      tableState.pagination.start = 0;
                      return ctrl.pipe();
                    });
                  });
                }
              };
    })

然后用法是这样的

<button type="button" st-reset-search>Clear Filters</button>

在这里找到： https://github.com/lorenzofox3/Smart-Table/issues/164

【讨论】：

【解决方案2】：

所以这就是我想出的......不确定它是否是一个好方法，但根据我收集到的信息，我需要创建很多指令来在智能表上发挥功能？

&lt;button type="button" class="btn-sm btn-default" smart-table-reset="clearFilter()"&gt;

    .directive('smartTableReset', ['$parse', function ($parse) {
        return {
            restrict: 'A',
            require: '^stTable',
            link: function (scope, element, attr, ctrl) {
                var tableCtrl = ctrl;
                var fn = $parse(attr['smartTableReset']);

                element.on('click', function (event) {
                    ctrl.tableState().search = {};
                    tableCtrl.search('', '');
                    scope.$apply(function () {
                        fn(scope, {
                            $event: event
                        })
                    });
                });
            }
        };

【讨论】：