Simple example to select rows.
You selected the following rows:
{{ showCase.selected |json }}
You selected the following rows:
{{ showCase.selected |json }}
angular.module('showcase.rowSelect', ['datatables'])
.controller('RowSelectCtrl', RowSelect);
function RowSelect($compile, $scope, $resource, DTOptionsBuilder, DTColumnBuilder) {
var vm = this;
vm.selected = {};
vm.selectAll = false;
vm.toggleAll = toggleAll;
vm.toggleOne = toggleOne;
var titleHtml = '';
vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
return $resource('data1.json').query().$promise;
})
.withOption('createdRow', function(row, data, dataIndex) {
// Recompiling so we can bind Angular directive to the DT
$compile(angular.element(row).contents())($scope);
})
.withOption('headerCallback', function(header) {
if (!vm.headerCompiled) {
// Use this headerCompiled field to only compile header once
vm.headerCompiled = true;
$compile(angular.element(header).contents())($scope);
}
})
.withPaginationType('full_numbers');
vm.dtColumns = [
DTColumnBuilder.newColumn(null).withTitle(titleHtml).notSortable()
.renderWith(function(data, type, full, meta) {
vm.selected[full.id] = false;
return '';
}),
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
];
function toggleAll (selectAll, selectedItems) {
for (var id in selectedItems) {
if (selectedItems.hasOwnProperty(id)) {
selectedItems[id] = selectAll;
}
}
}
function toggleOne (selectedItems) {
for (var id in selectedItems) {
if (selectedItems.hasOwnProperty(id)) {
if(!selectedItems[id]) {
vm.selectAll = false;
return;
}
}
}
vm.selectAll = true;
}
}