jeremy jeremy - 2 months ago 27
AngularJS Question

Select All Checkbox for Smart tables in AngularJS

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

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>