I'm trying to create a directive that uses ngTable
to paginate my tables, but I was not successful.
Abstracts the angular code that is used to paginate by throwing it inside a directive, so you do not have to keep replicating that code on other screens.
The question is, what's missing for the policy to work properly?
The following is the code below:
Policy
angular.module('directiveApp', ['ngTable']).directive('pagination', ['ngTableParams', function(ngTableParams) {
return {
templateUrl:'/table.html',
restrict: 'A',
replace: true,
transclude: true,
scope: {
list: '=' \objeto JSON
},
controller: function($scope) {
var data = [];
for (var element in $scope.list) {
data.push($scope.list[element]);
}
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: data.length, // length of data
getData: function($defer, params) {
$defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
}
};
}]);
table.html - used in the directive
<table data-ng-table="tableParams" class="table" data-ng-transclude></table>
Controller
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope) {
$scope.listaPessoas = [{id: 1, nome:'Pessoa 1'},
{id: 2, nome:'Pessoa 2'},
{id: 3, nome:'Pessoa 3'},
{id: 4, nome:'Pessoa 4'},
{id: 5, nome:'Pessoa 5'},
{id: 6, nome:'Pessoa 6'},
{id: 7, nome:'Pessoa 7'},
{id: 8, nome:'Pessoa 8'},
{id: 9, nome:'Pessoa 9'},
{id: 10, nome:'Pessoa 10'},
{id: 11, nome:'Pessoa 11'}]; }]);
screen.html - test screen
<table pagination list="listaPessoas">
<tr data-ng-repeat="pessoa in $data">
<td data-title="'Nome'" ng-bind="pessoa.nome"></td>
</tr>
</table>