A veces necesitamos deshabilitar el botón, enlace en el evento de clic. En este artículo, veremos cómo hacerlo con la ayuda de AngularJS.
Acercarse:
- El enfoque es usar la directiva ng-disabled para deshabilitar un botón en particular.
- En el primer ejemplo, un solo botón se deshabilita con un clic y en el segundo, varios botones se pueden deshabilitar con un solo clic.
Ejemplo 1:
HTML
<!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.disabledFlag = false;
$scope.disableIt = function() {
$scope.disabledFlag = true;
};
});
</script>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;">
GeeksForGeeks
</h1>
<p>
Disable the button in AngularJS
</p>
<div ng-app="app">
<div ng-controller="controller">
<button ng-click='disableIt()'
ng-disabled='disabledFlag' >
Click to disable
</button>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!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.disabledFlag1 = false;
$scope.disableIt1 = function() {
$scope.disabledFlag1 = true;
};
$scope.disabledFlag2 = false;
$scope.disableIt2 = function() {
$scope.disabledFlag2 = true;
};
$scope.disabledFlag3 = false;
$scope.disableIt3 = function() {
$scope.disabledFlag3 = true;
};
$scope.disabledFlag = false;
$scope.disableIt = function() {
$scope.disabledFlag1 = true;
$scope.disabledFlag2 = true;
$scope.disabledFlag3 = true;
};
});
</script>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;">
GeeksForGeeks
</h1>
<p>
Disable the button in AngularJS
</p>
<div ng-app="app">
<div ng-controller="controller">
<button ng-click='disableIt1()'
ng-disabled='disabledFlag1' >
disable it
</button>
<button ng-click='disableIt2()'
ng-disabled='disabledFlag2' >
disable it
</button>
<button ng-click='disableIt3()'
ng-disabled='disabledFlag3' >
disable it
</button>
<br>
<br>
<button ng-click='disableIt()'
ng-disabled='disabledFlag' >
disable All
</button>
</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