Smart Table not update when search filter value ch

This question already has an answer here:

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

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?

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>

Smart Table not update when search filter value ch

问题:

回答1:

收藏的人(0)

Smart Table not update when search filter value ch

问题:

回答1:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮