当搜索筛选器值从javascript更改时，智能表不会更新

Smart Table not update when search filter value changes from javascript

本文关键字：智能 更新 筛选 搜索 javascript      更新时间：2023-09-26

我使用的是Angular Smart Table。当我使用st搜索指令使用搜索过滤器时，当我从javascript表更改其值时，不会得到更新。这是我的代码

这是我的控制器

angular.module('myApp', ['smart-table'])
.controller('mainCtrl', ['$scope', '$timeout',
    function ($scope, $timeout) {
        var nameList = ['Pierre', 'Pol', 'Jacques', 'Robert', 'Elisa'];
        var familyName = ['Dupont', 'Germain', 'Delcourt', 'bjip', 'Menez'];
        $scope.isLoading = false;
        $scope.rowCollection = [];

        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
            };
        }
        $scope.columns = ['firstName', 'lastName', 'age', 'email', 'balance'];
        for (var i = 0; i < 10; i++) {
            $scope.rowCollection.push(createRandomItem());
        }
        $scope.changeSearch = function () {
            document.getElementById('firstName').value = '';
        };
    }
]);

这是html

<body ng-controller="mainCtrl">
<div class="table-container">
    <table st-table="rowCollection" class="table table-striped">
        <thead>
            <tr>
                <th ng-repeat="col in columns" st-sort="{{col}}">{{col}}</th>
            </tr>
            <tr>
                <th>
                    <input st-search="firstName" id="firstName" 
                           placeholder="search for firstname"
                           class="input-sm form-control"
                           type="search" />
                </th>
                <th colspan="4">
                    <input st-search placeholder="global search" 
                           class="input-sm form-control"
                           type="search" />
                </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in rowCollection">
                <td ng-repeat="col in columns">{{row[col]}}</td>

            </tr>
        </tbody>
    </table>
    <button ng-click="changeSearch()">Change Search</button>
</div>
<div ng-show="isLoading" class="loading-indicator"></div>

<script src="angular.min.js"></script>
<script src="smart-table.min.js"></script>
<script src="app2.js"></script>

我拿了一个按钮，点击它的方法改变搜索过滤器的值，它的值改变了，但表并没有被过滤。需要帮助吗？是否可以更改代码中的搜索筛选器值？

要用按钮触发过滤器，需要创建自定义指令。

您不应该在控制器中使用DOM操作。要操作DOM值，可以使用ngModel。

<input st-search="firstName" id="firstName" 
       placeholder="search for firstname" class="input-sm form-control"
       type="search" ng-model="firstName" />

然后将changeSearch功能更改为：

    $scope.changeSearch = function () {
        ̶d̶o̶c̶u̶m̶e̶n̶t̶.̶g̶e̶t̶E̶l̶e̶m̶e̶n̶t̶B̶y̶I̶d̶(̶'̶f̶i̶r̶s̶t̶N̶a̶m̶e̶'̶)̶.̶v̶a̶l̶u̶e̶ ̶=̶ ̶'̶'̶;̶
        $scope.firstName = 'Ghazanfar';
    };

您仍然需要创建自定义指令来触发筛选器。因为这是您可以用来获取智能表实例的唯一方法。（AFAIK）

下面是一个提交按钮指令的示例。

(function() {
  "use strict";
  angular
    .module('st-submit-search', ['smart-table'])
    .directive('stSubmitSearch', function () {
      return {
        restrict: 'EA',
        require: '^stTable', // to get smart-table as dependency
        link: function(scope, element, attrs, ctrl) {
          // ctrl is smart-table instance
          element.bind('click', function(evt) {
            scope.$apply(ctrl.pipe());
          });
        }
      };
    });
})();

然后在您的视图中使用指令：

<button st-submit-search ng-click="changeSearch()">Change Search</button>

相关文章：