I've been working on a project using AngularJS and have encountered some strange behavior with ng-repeat. My controller is returning data to ng-repeat as follows:
.....
//Other JS Functions
.....
var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, ngTableParams) {
var data = [
//data in JSON form
];
$scope.tableParams = new ngTableParams({
page: 1,
count: 5
}, {
total:data.length,
getData: function($defer, params) {
var slicedData = data.slice((params.page() - 1) * params.count(), params.page() * params.count());
alert(slicedData.length);
console.log(slicedData);
$defer.resolve(slicedData);
}
});
})
Everything seems fine up to this point as I am receiving the expected data after slicing it.
However, when I use ng-repeat to display the data in tables like so:
<table ng-table="tableParams" class="table ng-table-responsive">
<tr ng-repeat="d in $data">
<td data-title="Name">
{{d.id}}
</td>
<td data-title="Length">{{$data.length}}</td>
<td data-title="Age">
{{d.ciscoID}}
</td>
</tr>
</table>
The issue arises where although the length displayed is accurate at 5, each record is shown multiple times (e.g. 25 if count is set to 5). Even if I change the count to 10, each record will be repeated ten times.
I find this perplexing since:
<td data-title="Length">{{$data.length}}</td>
correctly displays the length of the data array. So, I would expect the iteration to be correct as well.
Furthermore, I've noticed that my getData() method in the controller is being called twice for some reason. Any insights or guidance on this matter would be greatly appreciated. Thank you :-)