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