AngularJS: $defer.resolve() not binding data to table - angularjs

Question

Below is my HTML code for loading data in a table.
<table id="users" class="dashboard-widget msbf-table" ng-table="usersTableParams" hide-pagination="false" show-filter="true">
<tr ng-repeat = "user in users" ng-click="usersClicked($event, user.userId);">
<td data-title="'User login'" sortable="'userLogin'" filter="{'userId' : 'text'}">{{user.userId}}</td>
<td data-title="'User role'" sortable="" filter="{'roleName' : 'text'}">{{user.roleName}}</td>
</tr>
</table>
This is my code for populating data in the table:
$scope.usersTableParams = new ngTableParams({
page: startPage,
count: rowsPerPage,
sorting: {
userId: 'asc'
},
filter: {
userId: '',
roleName:''
}
},
{
total: $scope.users.length,
getData: function($defer, params){
// use build-in angular filter
var orderedData = getFilteredSortedData($scope.users, params);
//var orderedData = params.filter() ? $filter('filter')($scope.users, params.filter()) : $scope.users;
//$scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
params.total(orderedData.length); // set total for recalc pagination
$defer.resolve(getSlicedData(orderedData,params));
}
});
var getFilteredSortedData = function(data, params) {
if (params.filter()) {
data = $filter('filter')(data, params.filter());
}
if (params) {
data = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
}
console.log('Filtered Data: '+JSON.stringify(data));
console.log('Filtered Data size: '+data.length);
return data;
};
//slices the data for the current page, checked
var getSlicedData = function(data, params) {
var slicedData = data.slice((params.page() - 1) * params.count(), params.page() * params.count());
console.log('Sliced Data: '+JSON.stringify(slicedData));
console.log('Sliced Data size: '+data.length);
return slicedData;
};
The problem is that the data is coming correctly to the variable 'slicedData', however, this doesn't get's populated in the HTML table. What I suspect is that the line :
$defer.resolve(getSlicedData(orderedData,params))'
is not working. Any pointers / idea are welcome.
Thanks & Regards
Nishant Kumar

Answer 1

I finally figured out what was going wrong.
<table id="users" class="dashboard-widget msbf-table" ng-table="usersTableParams" hide-pagination="false" show-filter="true">
<tr ng-repeat = "user in users" ng-click="usersClicked($event, user.userId);">
....
</tr>
</table>
The
ng-repeat = "user in users"
should be replaced with
ng-repeat = "user in $data"
if you are using
getData in ngTableParams
to customize your data that is being displayed.
Based on my understanding, this happens because the getData() function puts data with all other details in $data rather than the variable that actually stores it. This $data variable is responsible for data that will be rendered based on configurations specified for the table when declaring the parameters for the table.
Hope you all concur with my understanding. Since I am new to Angular JS, so I might have provided explanation based on wrong assumptions so corrections of any sort are most welcome and thanks to all StackFlow followers and contributors for helping me out here.

Answer 2

You need to call $apply, or trigger a digest after the resolve is called.
Change getData to be:
getData: function($defer, $timeout, params){
// use build-in angular filter
var orderedData = getFilteredSortedData($scope.users, params);
//var orderedData = params.filter() ? $filter('filter')($scope.users, params.filter()) : $scope.users;
//$scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
params.total(orderedData.length); // set total for recalc pagination
$defer.resolve(getSlicedData(orderedData,params));
if (!$scope.$$phase) {
$scope.$digest();
}
}
You could also try wrapping $defer.resolve in a $timeout, this triggers a digest - Try this:
getData: function($defer, params){
// use build-in angular filter
var orderedData = getFilteredSortedData($scope.users, params);
//var orderedData = params.filter() ? $filter('filter')($scope.users, params.filter()) : $scope.users;
//$scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
params.total(orderedData.length); // set total for recalc pagination
$timeout(function() {
$defer.resolve(getSlicedData(orderedData,params));
})
}
The reason you need to do this is asnychronous code is not picked up by angularJS's watchers.