using AND operator in Angular

Question

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 ?

Kirill Slatin · Accepted Answer · 2015-06-12 11:17:01Z

2

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

edited Jun 12, 2015 at 11:17

answered Jun 12, 2015 at 8:03

Kirill Slatin

6,1823 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SJMan Over a year ago

another add on question, how can I change text to select All/ Deselect all in the same scenario ?

Kirill Slatin Over a year ago

In my opinion this will be not the only thing you will have to trace. Obviously you will have a mechanism to select individual items and it should be reflected too. You will have to build a three-state checkbox on your own. In my updated answer I give an idea when to trugger it

shershen · Accepted Answer · 2015-06-12 07:44:01Z

0

Did you try ng-checkbox is should do exaclty what

answered Jun 12, 2015 at 7:44

shershen

10k11 gold badges44 silver badges62 bronze badges

1 Comment

Kirill Slatin Over a year ago

How exactly does it help to modify a list in scope without an extra function in $scope?

Collectives™ on Stack Overflow

using AND operator in Angular

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related