I am having difficulties in understanding how to find out if some checkbox is selected or not in Angular.
This is the problem:
I have simple HTML table, on ng-change event I am calling one function that need to check if 'select all' checkbox is checked:
This is HTML:
<table class="table table-striped">
<thead>
<tr class="table-header">
<th ng-if="!newTestSessionCtrl.formData.battery.id"><input type="checkbox" ng-model="selectedAll" ng-change="newTestSessionCtrl.isSelectAll()" /></th>
<th>Test</th>
<th>Available Time</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in newTestSessionCtrl.formData.battery.testDefinitions">
<td ng-if="!newTestSessionCtrl.formData.battery.id"><input type="checkbox" ng-model="row.selected" ng-change="newTestSessionCtrl.isLabelChecked(); newTestSessionCtrl.validate()" /></td>
<td></td>
<td> minutes</td>
</tr>
</tbody>
</table>
The name of model is: selectedAll
I have two functions, first one should be use for select all and deselect:
isSelectAll() {
let self = this;
self.model.selectedLabelList = [];
if(self.selectedAll) {
self.selectedAll = true;
for(var i=0; i < self.formData.battery.testDefinitions.length; i++) {
self.model.selectedLabelList.push(self.formData.battery.testDefinitions[i].name);
}
}
else {
self.selectedAll = false;
}
angular.forEach(self.formData.battery.testDefinitions, function(item) {
item.selected = self.selectedAll;
});
}
And the other one for un-checking 'select all' checkbox if one of the check boxes is deselected manual are this:
isLabelChecked() {
let self = this;
let _name = this.formData.battery.name;
if(this.formData.battery.selected) {
self.model.selectedLabelList.push(_name);
if(self.model.selectedLabelList.length == self.labelList.length ) {
self.selectedAll = true;
}
}else{
self.selectedAll = false;
let index = self.model.selectedLabelList.indexOf(_name);
self.model.selectedLabelList.splice(index, 1);
}
}
The problem is when defining selectedAll in js file.
I have constructor and if I do not define anything in it, selectedAll won't be in scope.
If I do this:
class NewTestSessionController {
constructor($scope, $state, resources, NewTestSessionService, formats, AuthenticationService, toastr, momentTimezone, _) {
this.model = {
selectedLabelList : []
};
this.selectedAll;
}
selectedAll will be in scope, but I will get 'false' value always. No matter if I have selected or deselected checkbox. If I assign some value like this this.selectedAll = true
it won't be working correctly of course.
I have problem understanding why ng-model="selectedAll"
is not visible and how can I make it visible in js file, without using $scope
, since the main goal of my practice is to avoid usage of it.
Can someone see where I am making a mistake?
Aucun commentaire:
Enregistrer un commentaire