极客教程在AngularJS中用ng-checked来获取复选框的状态的替代方法
在这篇文章中，我们将看到如何在AngularJS中获得复选框的状态。这项任务可以在ng-model指令的帮助下完成，该指令有助于绑定输入、选择和文本区域，并将所需的用户值存储在一个变量中，我们可以在需要该值时使用该变量。
步骤:
- ng-model被用来获取选中的复选框。
- 只要给ng-model设置不同的值，这些值将被用来检查元素是否被选中。
- 对于所选复选框的真值，将弹出一个警报。
例子1：本例子描述了获得复选框的状态，这些复选框在点击按钮时显示帮助提醒信息。
<!DOCTYPE HTML>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
</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>
输出:
例子2：这个例子描述了在点击按钮时获得复选框的状态。
<!DOCTYPE HTML>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
</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>
输出:
