En este artículo, veremos cómo marcar la casilla de verificación al hacer clic en un botón en AngularJS.
Enfoque: el enfoque es usar ng-checked para marcar la casilla de verificación en el DOM. En el primer ejemplo, el botón marca una única casilla de verificación y, en el segundo ejemplo, el botón marca varias casillas de verificación. ng-model se usa para vincular las casillas de verificación.
Ejemplo 1:
<!DOCTYPE HTML>
<html>
<head>
<script src=
"//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.checkIt = function () {
if (!$scope.check) {
$scope.check = true;
} else {
$scope.check = false;
}
}
});
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p>
How to set checkbox checked on
button click in AngularJS
</p>
<div ng-app="app">
<div ng-controller="controller">
Checkbox: <input type="checkbox"
ng-checked="check">
<br>
<br>
<button ng-click="checkIt()"
ng-model='check'>
Click to Check
</button>
<br>
<br>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE HTML>
<html>
<head>
<script src=
"//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.checkIt = function () {
if (!$scope.check) {
$scope.check = true;
} else {
$scope.check = false;
}
}
});
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p>
How to set checkbox checked on
button click in AngularJS
</p>
<div ng-app="app">
<div ng-controller="controller">
Checkbox1: <input type="checkbox"
ng-checked="check">
<br>
Checkbox2: <input type="checkbox"
ng-checked="check">
<br>
Checkbox3: <input type="checkbox"
ng-checked="check">
<br>
<br>
<button ng-click="checkIt()"
ng-model='check'>
Click to Check
</button>
<br>
<br>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA