AngularJS ng-checked Directive
The ng-checked Directive in AngularJS is used to read the checked or unchecked state of the checkbox or radio button to true or false. If the expression inside the ng-checked attribute returns true then the checkbox/radio button will be checked otherwise it will be unchecked.
Syntax:
<input type="checkbox|radio"
ng-checked="expression">
Contents...
</input>
If the expression returns true then the element’s checked attribute will be checked.
Example: This example uses the ng-checked Directive to select the checkbox and return the all selected checkbox value.
HTML
<!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 >
< h3 >ng-checked Directive</ h3 >
< 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 >
< b >isAllSelected = {{isChecked}}</ b >
</ div >
< script >
var app = angular.module("app", []);
app.controller('geek',
['$scope', function($scope) {}]);
</ script >
</ body >
</ html >
|
Output:
Example: This example describes the ng-checked Directive to check & uncheck all at once.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
ng-checked Directive
</ title >
< script src =
</ script >
</ head >
< body ng-app = "app" >
< h1 style = "color: green" >
GeeksforGeeks
</ h1 >
< h3 >ng-checked Directive</ h3 >
< div ng-controller = "geek" >
< input type = "checkbox"
ng-checked = "checkMe" />DSA
< br />
< input type = "checkbox"
ng-checked = "checkMe" />Web Tech
< br />
< input type = "checkbox"
ng-checked = "checkMe" />
Programming Language
< br />
< button value = "Check"
ng-click = "check()" >
Check
</ button >
< button value = "Uncheck"
ng-click = "uncheck()" >
Uncheck
</ button >
</ div >
< script >
var clickModify = angular.module('app', []);
clickModify.controller('geek', ['$scope', '$http',
function($scope, $http) {
$scope.check = function() {
$scope.checkMe = true;
};
$scope.uncheck = function() {
$scope.checkMe = false;
};
},
]);
</ script >
</ body >
</ html >
|
Output:
Last Updated :
28 Jul, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...