Смарт-таблица не обновляется при изменении значения поискового фильтра по сравнению с javascript [duplicate]

Question

Смарт-таблица не обновляется при изменении значения поискового фильтра по сравнению с javascript [duplicate]

0

Я использую 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>

Я взял кнопку и по методу кликов изменил значение фильтра поиска, изменив его значение, но таблица не фильтруется. Нужна помощь? Можно ли изменить значение поисковых фильтров из кода?

Ghazanfar Khan 31 дек. 2015, в 17:26

Источник

Теги:

javascript

angularjs

filter

smart-table

1 ответ

Ещё вопросы

Kiddo · Answer 1 · 2016-01-12T02-58-00.000Z

Чтобы запустить фильтр с помощью кнопки, вам необходимо создать настраиваемую директиву.

Вы не должны использовать 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';
    };

Вам все равно нужно создать настраиваемую директиву для запуска фильтра. Потому что это единственный метод, который вы можете использовать для получения экземпляра смарт-таблицы. (НАСКОЛЬКО МНЕ ИЗВЕСТНО)

Ниже приведен пример директивы кнопки отправки.

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

Это решение не работает с этим DEMO на JSFiddle .