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

<input xd-st-search="{{searchCol}}" 
     placeholder="search for {{searchCol}}"
     class="input-sm form-control"
     ng-model="searchVal" />

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

 <script src='//unpkg.com/angular/angular.js'></script>
 <script src='//unpkg.com/angular-smart-table/dist/smart-table.js'></script>
<body ng-app="app" ng-controller="mainCtrl">
  <div class="table-container">
    <div>Preset
       <select ng-model="searchVal">
         <option value="Ja">Ja</option>
         <option value="Po">Po</option>
         <option value="j">j</option>
       </select>
    </div>
    <table st-table="rowCollection" class="table table-striped">
        <caption style="text-align: left">
          <input st-search placeholder="global search" 
             class="input-sm form-control" />
          <br>
          <select ng-model="searchCol" ng-init="searchCol='firstName'">
            <option value="firstName">Search firstName</option>
            <option value="lastName">Search lastName</option>
          </select>
          <input xd-st-search="{{searchCol}}" 
             placeholder="search for {{searchCol}}"
             class="input-sm form-control"
             ng-model="searchVal" />
        </caption>
        <thead>
            <tr>
                <th ng-repeat="col in columns" st-sort="{{col}}">{{col}}</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in rowCollection">
                <td ng-repeat="col in columns">{{row[col]}}</td>
            </tr>
        </tbody>
    </table>
  </div>
</body>