2015-03-23 4 views
5

कोणीय और स्मार्ट-टेबल के लिए नया ..स्मार्ट-टेबल - फ़िल्टर संग्रह को रीसेट कैसे करें?

यह स्मार्ट-टेबल सेटअप सही तरीके से काम करता है और फ़िल्टर करता है, लेकिन फ़िल्टर को रीसेट या साफ़ करने का प्रयास तालिका को फिर से फ़िल्टर नहीं करता है। क्यों नहीं?

क्या एनजी-मॉडल बाध्यकारी के साथ इनपुट अपडेट करना स्मार्ट-टेबल की तलाश में एक घड़ी को ट्रिगर नहीं करता है?

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>

+0

चेक तुम्हारा को यह समान दृष्टिकोण https://github.com/: प्रयोग इस तरह से

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

यहां पाया की तरह है थोड़ा आसान है lorenzofox3/स्मार्ट-मेज/मुद्दों/164 – mentat

उत्तर

2

तो यही वह है जो मैं आया हूं ... सुनिश्चित नहीं है कि यह एक अच्छा दृष्टिकोण है या नहीं, लेकिन जो मैं इकट्ठा करता हूं उससे मुझे स्मार्ट-टेबल पर कार्यक्षमता को लागू करने के लिए बहुत से निर्देश बनाने की आवश्यकता है?

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

संबंधित मुद्दे