Angular Checkboxes "Select All" functionality with only one box selected initially

Question

I have a form that contains 3 checkboxes: "Select All", "Option 1", and "Option 2".

<form id="selectionForm">     <input type="checkbox" ng-model="selectAll" >Select all     <br>     <input type="checkbox" ng-checked="selectAll" checked>Option 1     <br>     <input type="checkbox" ng-checked="selectAll">Option 2 </form> 

On the initial page load I want only Option 1 to be checked. And then if the Select All checkbox gets checked it should automatically check Option 1 and Option 2 so all are selected.

The problem is on the initial page load the ng-checked="selectAll" gets evaluated which overrides my attempt to initially check only Option 1 (selectAll = false initially), so nothing is selected.

This seems like a simple problem to solve, but I can't figure out a solution... Thanks in advance for any insights or advice!

Answer 1

Another way to go about it is to use a model for the options, set default selection in the model and have your controller handle the logic of doing select all.

angular.module("app", []).controller("ctrl", function($scope){        $scope.options = [      {value:'Option1', selected:true},       {value:'Option2', selected:false}    ];        $scope.toggleAll = function() {       var toggleStatus = !$scope.isAllSelected;       angular.forEach($scope.options, function(itm){ itm.selected = toggleStatus; });         }        $scope.optionToggled = function(){      $scope.isAllSelected = $scope.options.every(function(itm){ return itm.selected; })    }  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">    </script>  <div ng-app="app" ng-controller="ctrl">  <form id="selectionForm">      <input type="checkbox" ng-click="toggleAll()" ng-model="isAllSelected">Select all      <br>       <div ng-repeat = "option in options">          <input type="checkbox" ng-model="option.selected" ng-change="optionToggled()">{{option.value}}       </div>  </form>    {{options}}   </div>

Answer 2

Try this:

<form id="selectionForm">     <input type="checkbox" ng-model="selectAll" >Select all     <br>     <input type="checkbox" ng-checked="selectAll || option1" ng-init="option1=true" ng-model="option1">Option 1     <br>     <input type="checkbox" ng-checked="selectAll">Option 2 </form>