mardi 27 décembre 2016

Select and deselect all check-boxes on click in AngularJs

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