Improved select row example

Signed-off-by: Jack Yen <[email protected]>

Author: jyen

demo/advanced/rowSelect.html

@@ -13,9 +13,6 @@ <h1><i class="fa fa-play"></i>&nbsp;Selecting rows</h1>
                 <article class="preview">
                     <div ng-controller="RowSelectCtrl as showCase">
                         <p class="text-danger">You selected the following rows: <strong>{{ showCase.selected }}</strong></p>
-                        <p>
-                            <button class="btn btn-primary" ng-click="showCase.toggleAll()">Select/Remove all</button>
-                        </p>
                         <table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>
                     </div>
                 </article>

demo/advanced/rowSelect.js

@@ -5,19 +5,34 @@ angular.module('showcase.rowSelect', ['datatables'])
 function RowSelect($compile, $scope, $resource, DTOptionsBuilder, DTColumnBuilder, DTInstances) {
     var vm = this;
     vm.selected = {};
+    vm.selectAll = false;
     vm.toggleAll = toggleAll;
+    vm.toggleOne = toggleOne;
+
+    var titleHtml = '<input type="checkbox" ng-model="showCase.selectAll"' +
+        'ng-click="showCase.toggleAll(showCase.selectAll, showCase.selected)">';
+
     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 (!$scope.headerCompiled) {
+                //use this headerCompiled field to only compile header once
+                $scope.headerCompiled = true;
+                $compile(angular.element(header).contents())($scope);
+            }
+        })
         .withPaginationType('full_numbers');
     vm.dtColumns = [
-        DTColumnBuilder.newColumn(null).withTitle('').notSortable()
+        DTColumnBuilder.newColumn(null).withTitle(titleHtml).notSortable()
             .renderWith(function(data, type, full, meta) {
-                return '<input type="checkbox" ng-model="showCase.selected[' + data.id + ']"/>';
+                vm.selected[full.id] = false;
+                return '<input type="checkbox" ng-model="showCase.selected[' + data.id + ']"' +
+                    'ng-click="showCase.toggleOne(showCase.selected)"/>';
             }),
         DTColumnBuilder.newColumn('id').withTitle('ID'),
         DTColumnBuilder.newColumn('firstName').withTitle('First name'),
@@ -30,13 +45,24 @@ function RowSelect($compile, $scope, $resource, DTOptionsBuilder, DTColumnBuilde
         });
     });
 
-    var _toggle = true;
-    function toggleAll() {
-        for (var prop in vm.selected) {
-           if (vm.selected.hasOwnProperty(prop)) {
-               vm.selected[prop] = _toggle;
-           }
+    function toggleAll (selectAll, selectedItems) {
+        for (var id in selectedItems) {
+            if (selectedItems.hasOwnProperty(id)) {
+                selectedItems[id] = selectAll;
+            }
+        }
+    };
+
+    function toggleOne (selectedItems) {
+        var me = this;
+        for (var id in selectedItems) {
+            if (selectedItems.hasOwnProperty(id)) {
+                if(!selectedItems[id]) {
+                    me.selectAll = false;
+                    return;
+                }
+            }
         }
-        _toggle = !_toggle;
-    }
+        me.selectAll = true;
+    };
 }