Smart Table not update when search filter value changes from javascript

Question

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?

score -1 · Answer 1 · edited Dec 16 '17 at 19:11

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>

This solution did not work with this [DEMO on JSFiddle](https://jsfiddle.net/sx7toq5z/1/). — georgeawg, Dec 17 '17 at 08:01

Smart Table not update when search filter value changes from javascript

1 Answers1

Linked