Select All Checkbox for Smart tables in AngularJS

Question

Hey guys so i'm trying to implement a selectall checkbox at the top of my list of checkboxes using a custom directive and i've referred to this thread to do so: https://github.com/lorenzofox3/Smart-Table/issues/270

So far I'm getting an error that says TypeError: Cannot read property 'forEach' of undefined. Would really appreciate it if someone can help me out with this one. Thanks

My html:

<div class="row">
      <div class="col-md-12">
        <table id="document-table" st-table="documents" class="table">
          <thead>
            <tr>
              <th>
                <st-select-all all="yourDisplayedCollection"></st-select-all>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="document in documents">
              <td><input type="checkbox" ng-model="checkedDocument"/></td>
            </tr>
          </tbody>
         </table>
      </div>
    </div>

My Directive:

.directive('stSelectAll', function () {
        return {
            restrict: 'E',
            template: '<input type="checkbox" ng-model="isAllSelected" />',
            scope: {
            all: '='
            },
            link: function (scope, element, attr) {

            scope.$watch('isAllSelected', function () {
                scope.all.forEach(function (val) {
                val.isSelected = scope.isAllSelected;
                })
            });

            scope.$watch('all', function (newVal, oldVal) {
                if (oldVal) {
                oldVal.forEach(function (val) {
                    val.isSelected = false;
                });
                }

                scope.isAllSelected = false;
            });
            }
        }
        });

Answer 1

I don't think you need to watch all, only isAllSelected. Try removing that watch altogether. I'm using the same directive for Smart Table and I don't watch all. You also want to add a check to make sure all exists:

scope.$watch('isAllSelected', function() {
  if(scope.all) {
    scope.all.forEach(function (val) {
      val.isSelected = scope.isAllSelected;
    }
  }
});

Also, you are supposed to make a copy of your original array to use for st-safe-src attribute on your table. Then use the original array for your directive.

// in your controller (not in your directive)
$scope.yourDisplayedCollection = [].concat($scope.documents);

Then change your view.

<table id="document-table" st-table="documents" st-safe-src="yourDisplayedCollection" class="table">

<st-select-all all="documents"></st-select-all>