How to integrate Smart Table `st-search` with ng-model?

Question

How to set input search value that not thought user input on Smart Table? ?? here is my code,When user click the check box,The input field is auto input \"Sam\", but the table

Answer 1

The Smart Table is not integrated with the ng-model directive and the ngModelController.

Here is a replacement for the st-search directive which integrates Smart Table search with the ng-model directive:

app.directive('xdStSearch', ['stConfig', '$timeout', function (stConfig, $timeout) {
    return {
      require: {table: '^stTable', model: 'ngModel'},
      link: function (scope, element, attr, ctrl) {
        var tableCtrl = ctrl.table;
        var promise = null;
        var throttle = attr.stDelay || stConfig.search.delay;
        var event = attr.stInputEvent || stConfig.search.inputEvent;
        var trimSearch = attr.trimSearch || stConfig.search.trimSearch;

        attr.$observe('xdStSearch', function (newValue, oldValue) {
          var input = ctrl.model.$viewValue;
          if (newValue !== oldValue && input) {
            tableCtrl.tableState().search = {};
            input = angular.isString(input) && trimSearch ? input.trim() : input;
            tableCtrl.search(input, newValue);
          }
        });

        // view -> table state
        ctrl.model.$parsers.push(throttleSearch);
        ctrl.model.$formatters.push(throttleSearch)

        function throttleSearch(value) {
          if (promise !== null) {
            $timeout.cancel(promise);
          }    
          promise = $timeout(function () {
            var input = angular.isString(value) && trimSearch ? value.trim() : value;
            tableCtrl.search(input, attr.xdStSearch || '');
            promise = null;
          }, throttle);
          return value;
        }
      }
    };
}])

Usage

The DEMO

angular.module('app', ['smart-table'])
.directive('xdStSearch', ['stConfig', '$timeout', function (stConfig, $timeout) {
    return {
      require: {table: '^stTable', model: 'ngModel'},
      link: function (scope, element, attr, ctrl) {
        var tableCtrl = ctrl.table;
        var promise = null;
        var throttle = attr.stDelay || stConfig.search.delay;
        var event = attr.stInputEvent || stConfig.search.inputEvent;
        var trimSearch = attr.trimSearch || stConfig.search.trimSearch;

        attr.$observe('xdStSearch', function (newValue, oldValue) {
          var input = ctrl.model.$viewValue;
          if (newValue !== oldValue && input) {
            tableCtrl.tableState().search = {};
            input = angular.isString(input) && trimSearch ? input.trim() : input;
            tableCtrl.search(input, newValue);
          }
        });

        // view -> table state
        ctrl.model.$parsers.push(throttleSearch);
        ctrl.model.$formatters.push(throttleSearch)
        
        function throttleSearch(value) {
          if (promise !== null) {
            $timeout.cancel(promise);
          }

          promise = $timeout(function () {
            var input = angular.isString(value) && trimSearch ? value.trim() : value;
            tableCtrl.search(input, attr.xdStSearch || '');
            promise = null;
          }, throttle);
          return value;
        }
      }
    };
}])
.controller('mainCtrl', function ($scope, $timeout) {
    var nameList = ['Pierre', 'Pol', 'Jacques', 'Robert', 'Elisa'];
    var familyName = ['Dupont', 'Germain', 'Delcourt', 'bjip', 'Menez'];
    $scope.columns = ['firstName', 'lastName', 'age', 'email', 'balance'];

    $scope.rowCollection = [];
    for (var i = 0; i < 10; i++) {
        $scope.rowCollection.push(createRandomItem());
    }
        
    $scope.changeSearch = function () {
           $scope.firstName = 'Ghazanfar';
    };

    function createRandomItem() {
      var
          firstName = nameList[Math.floor(Math.random() * 4)],
          lastName = familyName[Math.floor(Math.random() * 4)],
          age = Math.floor(Math.random() * 100),
          email = firstName + lastName + '@whatever.com',
          balance = Math.random() * 3000;

          return {
              firstName: firstName,
              lastName: lastName,
              age: age,
              email: email,
              balance: balance
          };
      }
})

 
 

  

    
Preset
       
         Ja
         Po
         j
       
    
    

        

          
          

          
            Search firstName
            Search lastName
          
          
        
        

            

                
{{col}}
            
        
        

            

                
{{row[col]}}