Selecting rows

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; } }