smart-table - jak zresetować kolekcję filtrów?

Question

Nowość w tabelach kątowych i inteligentnych ..

Ta konfiguracja inteligentnego stołu działa i poprawnie filtruje, ale próba zresetowania lub wyczyszczenia filtrów nie powoduje ponownego odfiltrowania tabeli. Dlaczego nie?

Czy aktualizacja danych wejściowych z powiązaniem modelu ng nie wyzwala zegarka, którego szuka inteligentny stół?

Plunker jest dostępny tutaj: http://plnkr.co/edit/4os3oWeJtEtMfa89QoQd?p=preview

Kod:

 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 = ''; 
 

 
     }

Markup:

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

Answer 1

Więc to jest to, co wymyśliłem ... nie jestem pewien, czy jest to dobre podejście, czy nie, ale z tego, co zbieram, muszę stworzyć wiele dyrektyw, aby zapewnić funkcjonalność w stosunku do inteligentnego stołu?

<button type="button" class="btn-sm btn-default" smart-table-reset="clearFilter()">

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

Answer 2

Prawie to samo. Wykorzystanie jest trochę łatwiej w ten sposób

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

A potem użycie jest jak ten

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

znaleźć tutaj: https://github.com/lorenzofox3/Smart-Table/issues/164