AngularJS | ng-checked Directive
The ng-checked Directive in AngularJS is used to read the checked or unchecked state of the checkbox or radiobutton to true or false. If the expression inside the ng-checked attribute returns true then the checkbox/radiobutton will be checked otherwise it will be unchecked.
Syntax:
<input type="checkbox|radio" ng-checked="expression"> Contents... </input>
If expression returns true then the element’s checked attribute will be checked.
Example: This example uses ng-checked Directive to select checkbox and return the all selected checkbox value.
<!DOCTYPE html> < html > < head > < title >ng-checked Directive</ title > < script src = </ script > </ head > < body ng-app = "app" > < div ng-controller = "geek" > < h1 style = "color:green" >GeeksforGeeks</ h1 > < h2 >ng-checked Directive</ h2 > < input type = "checkbox" ng-checked="check1 && check2 && check3 && check4 && check5" ng-model = "isChecked" />< b >Select All</ b >< br > < input type = "checkbox" ng-model = "check1" ng-checked = "isChecked" />First< br > < input type = "checkbox" ng-model = "check2" ng-checked = "isChecked" />Second< br > < input type = "checkbox" ng-model = "check3" ng-checked = "isChecked" />Three< br > < input type = "checkbox" ng-model = "check4" ng-checked = "isChecked" /> Four< br > < input type = "checkbox" ng-model = "check5" ng-checked = "isChecked" />Five< br >< br > < b >isAllSelected = {{isChecked}}</ b > </ div > < script > var app = angular.module("app", []); app.controller('geek', ['$scope', function ($scope) { }]); </ script > </ body > </ html > |
Output:
Before clicking the checkbox:
After clicking the checkbox (select all):