I'm using angular v1.3.15. I'm fetching data by hitting an api and passing it through the scope to the smart table like so
Here is the data format of the 'scope.rowCollection' as seen on the console
Data populates fine but When i'm trying to click on the table-header and sort it using st-sort method, the table values go blank clearly not sorting the column. Here is a view of my html snippet
Can you please tell me what exactly am i doing wrong. The moment i use my own data collection set(NOT hard coded) the whole table values go haywire. I have a feeling its something to do with the variable names that i'm using on the angular end. Any help is much appreciated....Thanks
Following your comment Nikhil. Use st-safe-src like so:
HTML
<table st-table="displayedCollection" st-safe-src="rowCollection">
<thead>
<tr>
<th st-sort="firstName">First Name</th>
<th st-sort="lastName">Last Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayedCollection">
<td>{{row.firstName}}</td>
<td>{{row.lastName}}</td>
</tr>
</tbody>
</table>
JS
app.controller('Ctrl', function($scope, service) {
$scope.displayedCollection = [];
service.all.then(function(list) {
$scope.rowCollection = list;
$scope.displayedCollection = list;
});
});
That's it.