Smart Table not update when search filter value ch

2019-02-21 00:21发布

站内问答 / JavaScript
1278 1 6

This question already has an answer here:

I am using Angular Smart Table. While I am using search filters using st-search directive , when I change its value from javascript table doesnot get updates . here is my code

Here is my controller

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 = '';
        };

    }
]);

Here is the 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>

I took a button and on its click method change search filter value its value changes but table doesnot get filtered. Need help? Is it possible to change search filters value from code?

1条回答
神经病院院长
2楼-- · 2019-02-21 00:36

To trigger the filter with a button, you need to create a custom directive.

You should not use DOM manipulation in controller. To manipulate DOM value, you could use ngModel. 

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

Then change your changeSearch function to:

    $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';
    };

You still need to create custom directive to trigger the filter. Because it's the only method you can use to get the smart-table instance. (AFAIK)

Here is an example of a submit button directive.

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

And then use the directive in your view:

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)