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 record is not filter. and update.... Here is my code:

<body>
  <div class='container' ng-app='smarttabledemo' ng-controller='smarttabledemo'>
  <table st-table='data' class='table'>
    <thead>
      <tr>
        <th colspan='999'>
        <input name="myCheck[]" type="checkbox" id="myCheck"
               st-submit-search  ng-model="confirmed" ng-true-value="30"
               ng-false-value="1" ng-change="showcheckbox();">

       <input st-search="firstName" placeholder="search for firstname"
              class="input-sm form-control" type="search"
              ng-value="myVar" ng-model="myVar"/>
        </th>
      </tr>
      <tr>
        <th st-sort='firstName'>First Name</th>
        <th st-sort='lastName'>Last Name</th>
        <th st-sort='phone'>Phone Number</th>
        <th st-sort='hometown'>Hometown</th>
      </tr>
    </thead>
    <tbody>
      <tr st-select-row='row' ng-repeat='row in data'>
        <td>{{row.firstName}}</td>
        <td>{{row.lastName}}</td>
        <td>{{row.phone}}</td>
        <td>{{row.hometown}}</td>
      </tr>
    </tbody>
  </table>

</div>

'use strict';
angular.module('smarttabledemo', ['smart-table'])
.run(function() {
  console.clear();
})

.controller('smarttabledemo', function($scope) {
  $scope.data = [
    { firstName: 'Sam', lastName: 'Evans', phone: 'Not Provide', hometown: 'Anytown, ST' },
    { firstName: 'Saul', lastName: 'Evans', phone: '555-555-1234', hometown: 'Anytown, ST' },
    { firstName: 'Charlie', lastName: 'Anders', phone: '555-555-9876', hometown: 'Springfield, ST' },
    { firstName: 'Jessica', lastName: 'Cortez', phone: 'Not Provide', hometown: 'Springfield, ST' },
    { firstName: 'Amy', lastName: 'Wood', phone: '555-555-1348', hometown: 'Metroville, ST' },
  ]
      $scope.showcheckbox = function () {  
var myCheck = document.getElementsByName("myCheck[]");

    for (var i = 0; i < myCheck.length; i++) {
      if(myCheck[i].checked ){
        $scope.myVar = "Sam";
      }    
    }
}

Fiddle Here is my code, thanks My aims is hope user click the checkbox, The table is search about "Sam" record, thx

Please clean-up the example. All the things added in a failed attempt to get it to work are distracting. — georgeawg, Dec 16 '17 at 16:19
I create a example in Fiddle from https://stackoverflow.com/questions/34548943/smart-table-not-update-when-search-filter-value-changes-from-javascript , but still not work. Thank https://jsfiddle.net/sx7toq5z/1/ — tommy, Dec 17 '17 at 07:52
Related question: [Smart Table not update when search filter value changes from javascript Smart Table not update when search filter value changes from javascript](https://stackoverflow.com/questions/34548943/smart-table-not-update-when-search-filter-value-changes-from-javascript). — georgeawg, Dec 17 '17 at 18:02

score 2 · Accepted Answer · answered Dec 17 '17 at 18:53

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>

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

1 Answers1

Usage

The DEMO

Linked

Related