In this article, we will see how to get the state of the checkboxes in AngularJS. This task can be performed with the help of the ng-model directive that helps to bind input, select and textarea, and store the required user value in a variable and we can use that variable whenever we require that value.
Approach:
- ng-model is used to get the selected checkboxes.
- Just set the different values to the ng-model and those will be used to check whether the element is selected or not.
- An alert will pop-up for the selected checkboxes with true values.
Example 1: This example describes getting the state of the checkboxes that are displayed with the help alert message on clicking the button.
HTML
<!DOCTYPE HTML> < html >
< head >
< script src =
</ script >
< script >
var myApp = angular.module("app", []);
myApp.controller("controller", function ($scope) {
$scope.selCheckboxes = '';
$scope.getSelCheckB = function (myCheckbox) {
alert(JSON.stringify(myCheckbox));
};
});
</ script >
</ head >
< body style = "text-align:center;" >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< h3 >
Alternative of ng-checked to get
the checkbox's state in AngularJS
</ h3 >
< div ng-app = "app" >
< div ng-controller = "controller" >
< form action = "javascript:void(0)" >
Checkbox1 :
< input type = "checkbox" name = "checkbox1" ng-model = 'myCheckbox.val1' />< br />
Checkbox2 :
< input type = "checkbox"
name = "checkbox2" ng-model = 'myCheckbox.val2' />< br />
Checkbox3 :
< input type = "checkbox" name = "checkbox3" ng-model = 'myCheckbox.val3' />< br />
Checkbox4 :
< input type = "checkbox" name = "checkbox4" ng-model = 'myCheckbox.val4' />< br />
< br >
< button ng-click = "getSelCheckB(myCheckbox)" >
Click
</ button >
</ form >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: This example describes getting the state of the checkboxes on clicking the button.
HTML
<!DOCTYPE HTML> < html >
< head >
< script src =
</ script >
< script >
var myApp = angular.module("app", []);
myApp.controller("controller", function ($scope) {
$scope.selCheckboxes = '';
$scope.getSelCheckB = function (myCheckbox) {
$scope.selCheckboxes
= angular.copy(myCheckbox);
};
});
</ script >
</ head >
< body style = "text-align:center;" >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< h3 >
Alternative of ng-checked to get the
checkbox's state in AngularJS
</ h3 >
< div ng-app = "app" >
< div ng-controller = "controller" >
< form action = "javascript:void(0)" >
Checkbox1 :
< input type = "checkbox" name = "checkbox1" ng-model = 'myCheckbox.val1' />< br />
Checkbox2 :
< input type = "checkbox" name = "checkbox2" ng-model = 'myCheckbox.val2' />< br />
Checkbox3 :
< input type = "checkbox" name = "checkbox3" ng-model = 'myCheckbox.val3' />< br />
Checkbox4 :
< input type = "checkbox"
name = "checkbox4" ng-model = 'myCheckbox.val4' />< br />
< br >
< button ng-click = "getSelCheckB(myCheckbox)" >
Click
</ button >
</ form >
< p >Selected Checkboxes = {{selCheckboxes | json}}</ p >
</ div >
</ div >
</ body >
</ html >
|
Output: