Question

如何设置智能表上不认为用户输入的输入搜索值？ ?? 这是我的代码，当用户单击复选框时，输入字段是自动输入“Sam”，但表记录不是过滤器。并更新....这是我的代码：

<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 这是我的代码，谢谢我的目标是希望用户点击复选框，该表搜索“Sam”记录，thx

Answer 1

智能表未与ng-model指令和ngModelController。

集成

以下是Route指令的替代品，该指令将智能表搜索与render指令集成在一起：

st-search

用法

ng-model

The DEMO

＆＃13;

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

＆＃13;

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

＆＃13;

如何将智能表`st-search`与ng-model集成？

1 个答案:

用法

The DEMO