La directiva ng-disabled en AngularJS se usa para habilitar o deshabilitar elementos HTML. Si la expresión dentro del atributo ng-disabled devuelve verdadero, el campo del formulario se deshabilitará o viceversa. Por lo general, se aplica en el campo de formulario (entrada, selección, botón, etc.).
Sintaxis:
<element ng-disabled="expression"> Contents... </element>
Ejemplo 1: este ejemplo usa la directiva ng-disabled para deshabilitar el botón.
html
<!DOCTYPE html>
<html>
<head>
<title>ng-disabled Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="app" style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-disabled Directive</h2>
<div ng-controller="app" ng-init="disable=false">
<button ng-click="geek(disable)" ng-disabled="disable">
Click to Disable
</button>
<button ng-click="geek(disable)" ng-show="disable">
Click to Enable
</button>
</div>
<script>
var app = angular.module("app", []);
app.controller('app', ['$scope', function ($app) {
$app.geek = function (disable) {
$app.disable = !disable;
}
}]);
</script>
</body>
</html>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo 2: este ejemplo usa la directiva ng-disabled para habilitar y deshabilitar el botón usando la casilla de verificación.
html
<!DOCTYPE html>
<html>
<head>
<title>ng-disabled Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="app" style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-disabled Directive</h2>
<div ng-controller="geek">
<h4>
Check it
<input type="checkbox" ng-model="check" />
</h4>
<button type="button" ng-disabled="!(check)">
Click to submit
</button>
</div>
<script>
var app = angular.module("app", []);
app.controller('geek', ['$scope', function ($scope) {
$scope.disableClick = function (isDisabled) {
$scope.isDisabled = !isDisabled;
}
}]);
</script>
</body>
</html>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Navegador compatible:
- Google Chrome
- Borde de Microsoft
- Firefox
- Ópera
- Safari
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