Hi everyone, I'm currently working on adding a select-all checkbox to the top of my list of checkboxes using a custom directive. I found some guidance on how to do this in a thread that I came across: https://github.com/lorenzofox3/Smart-Table/issues/270
However, I am encountering an error that reads TypeError: Cannot read property 'forEach' of undefined. If anyone could lend me a hand with this issue, I would greatly appreciate it. Thank you.
Here is the snippet of 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>
And here is my Directive code:
.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;
});
}
}
});