javascriptangularjsangularjs-ng-modelsmart-table

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

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

enter image description here enter image description here

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

Solution

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