Angular Checkboxes “Select All” functionality with only one box selected initially

by

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>

More Related Contents:

  1. How to style a checkbox using CSS
  2. POST unchecked HTML checkboxes
  3. Compiling dynamic HTML strings from database
  4. With ng-bind-html-unsafe removed, how do I inject HTML?
  5. How do search engines deal with AngularJS applications?
  6. Can HTML checkboxes be set to readonly?
  7. Do checkbox inputs only post data if they’re checked?
  8. What’s the proper value for a checked attribute of an HTML checkbox?
  9. html select only one checkbox in a group
  10. How to create a checkbox with a clickable label?
  11. AngularJS ngClass conditional
  12. How do I delete an item or object from an array using ng-click?
  13. Angular 2 Checkbox Two Way Data Binding
  14. Why does the checkbox stay checked when reloading the page?
  15. CSS ”background-color” attribute not working on checkbox inside
  16. ng-app vs. data-ng-app, what is the difference?
  17. href overrides ng-click in Angular.js
  18. How to style a checkbox using CSS
  19. Tri-state Check box in HTML?
  20. Spring Boot with AngularJS html5Mode
  21. $http doesn’t send cookie in Requests
  22. Why cannot change checkbox color whatever I do? [duplicate]
  23. Google bot crawling on AngularJS site with HTML5 Mode routes
  24. How to specify model to a ngInclude directive in AngularJS?
  25. how to show pdf file in ionic app with out download
  26. AngularJS: Insert HTML from a string
  27. What does #/ means in url?
  28. What is the default form HTTP method?
  29. How to change the time format (12/24 hours) of an ?
  30. CSS margin adds space outside parent element [duplicate]

Leave a Comment