Search code examples
smart-table

Update smart table after content changed


I have an array of objects, which I display using st-table directive.

I filter the table by a value of a certain field in the objects. The problem is, once a value of a field in these objects has been changed, the filtering is not performed.

I believe the reason for it is that smart-table watches the array's length, but doesn't perform deep comparison to see whether or not the values inside any of the objects changed.

What can I do to solve this?

edit: added code:

angular.module('myApp', ['smart-table'])
    .controller('mainCtrl', ['$scope', '$timeout',
    function ($scope, $timeout) {

        $scope.rowCollection = [
        {
          name: "sth odd",
          number: 1
        },
        {
          name: "sth even",
          number: 1
        }
        ];

        $scope.displayedCollection = [].concat($scope.rowCollection);

        function changeNumber(){
          $timeout(function(){
            $scope.rowCollection[1].number = $scope.rowCollection[1].number === 1 ? 2 : 1;
            changeNumber();
          }, 1000);
        }

        changeNumber();


    }
]);

http://plnkr.co/edit/IVYy5WrsiEJSRXZCqY9z?p=preview

Notice how when you search e.g number "2", the view isn't updated even though the property of the second item sometimes is "2" and sometimes not.


Solution

  • Found a solution for you, instead of using st-search use a plain ng-model and then filter by the ng-model value. then in the ng-repeat filter by that value

    so instead of this

    <input st-search="number" placeholder="search for number" class="input-sm form-control" type="search"/>
    ...
    
    <tr ng-repeat="row in displayedCollection">
        <td>{{row.name}}</td>
        <td>{{row.number}}</td>
    </tr>
    

    do this

    <input ng-model="searchMe" placeholder="search for number" class="input-sm form-control" type="search"/>
    ....
    
    <tr ng-repeat="row in filterd = (displayedCollection | filter: searchMe)">
        <td>{{row.name}}</td>
        <td>{{row.number}}</td>
    </tr>
    

    here's a plunker, enter 2 and see how it redos the filtering each time