smart-table - come reimpostare la raccolta dei filtri?

Question

Nuovo al tavolo angolare e smart ..

Questa installazione di smart-table funziona e filtra correttamente, ma il tentativo di ripristinare o cancellare i filtri non ri-filtra la tabella. Perchè no?

L'aggiornamento di un input con associazione ng-model non attiva un orologio che Smart-Table sta cercando?

Plunker è disponibile qui: http://plnkr.co/edit/4os3oWeJtEtMfa89QoQd?p=preview

Codice:

 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

Quindi questo è quello che ho trovato ... non sono sicuro che sia un buon approccio o no, ma da quello che ho raccolto ho bisogno di creare molte direttive per esercitare la funzionalità su smart-table?

<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

Praticamente la stessa cosa. L'uso è un po 'più facile in questo modo

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

E poi l'utilizzo è così

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

trovato qui: https://github.com/lorenzofox3/Smart-Table/issues/164