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):
