La directiva ng-checked en AngularJS se usa para leer el estado marcado o no marcado de la casilla de verificación o el botón de opción como verdadero o falso. Si la expresión dentro del atributo ng-checked devuelve verdadero, la casilla de verificación/botón de radio se marcará; de lo contrario, no se marcará.
Sintaxis:
<input type="checkbox|radio"
ng-checked="expression">
Contents...
</input>
Si la expresión devuelve verdadero, se verificará el atributo verificado del elemento.
Ejemplo: este ejemplo utiliza la directiva ng-checked para seleccionar la casilla de verificación y devolver el valor de todas las casillas seleccionadas.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
ng-checked Directive
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</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>
Producción:
Ejemplo: Este ejemplo describe la Directiva ng-checked para marcar y desmarcar todo a la vez.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
ng-checked Directive
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</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>
Producción:
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA