CODEWITHSUNDEEP
angularjs
SJMan
SJMan

Reputation: 1607

using AND operator in Angular

I have the following HTML

<input type="checkbox" id="cbxSelectAllPreventive"/> <label>Select All</label>
    <ul style="list-style: none;">
       <li ng-repeat="test in lists.Tests">
       </li>
    </ul>

Test is an array of complex objects having isSelected property. I want to use the checkbox as SelectAll functionality. To do this , I need to supply ng-model to the checkbox, I can supply it as a method which checks in each of the tests and returns true/false. Is there any way to do this inline, without writing a method ?

Upvotes: 1

Views: 2103

Answers (2)

Kirill Slatin
Kirill Slatin

Reputation: 6143

I only see a way to do it using a function on ng-change

 <input type="checkbox" id="cbxSelectAllPreventive" 
      ng-model="checked" ng-change="setAll(checked)"/>
...
$scope.setAll = function(isSelected){
    $scope.lists.Tests.map(function(el){
        el.isSelected = isSelected;
    })
}

Working fiddle

EDIT:

For complete two-way connection between items' selection and check box the code will be a bit more complicated.

We will use an extra variable in $scope to reflect the label of check box. Don't forget to init the variable at controller creation

<label for="cbxSelectAllPreventive">{{selectLabel}}</label>
...
$scope.selectLabel = 'Select All';

setAll function should take care of setting this variable. 

$scope.setAll = function(isSelected){
    $scope.selectLabel = isSelected ? 'Deselect All' : 'Select All';
    $scope.lists.Tests.map(function(el){
        el.isSelected = isSelected;
    })
}

And finally you definitely will have an option to select/deselect individual items. For this case you have to $watch your list. Mind the third parameter true which does deep comparison otherwise it won't "notice" changes inside objects.

$scope.$watch('lists.Tests', function(){
    var text = $scope.lists.Tests.map(function(el){ return el.isSelected; }).join();
    console.log(text);
    var allSelected = $scope.lists.Tests.every(function(el){ return el.isSelected;});
    var noneSelected = $scope.lists.Tests.every(function(el){ return !el.isSelected;});
    if(noneSelected){
        $scope.selectLabel = 'Select All';
        $scope.checked = false;
    }else if(allSelected){
        $scope.selectLabel = 'Deselect All';
        $scope.checked = true;
    }
    if(!noneSelected && !allSelected) {
       $scope.selectLabel = 'Undetermined'; 
// here set the check box to undetermined (third) state
    }
}, true);

Updated fiddle

Upvotes: 2

shershen
shershen

Reputation: 9993

Did you try ng-checkbox is should do exaclty what

Upvotes: 0

Related Questions