 |
Você está aqui: AngularJS ::: Angular / AngularJS + JavaScript ::: Diretivas AngularJS |
Como usar a diretiva ng-disabled do AngularJS para desabilitar (e habilitar) elementos HTML nas suas páginasQuantidade de visualizações: 3659 vezes |
Em algumas situações precisamos desabilitar (e voltar a habilitar) os elementos HTML que compõem a nossa aplicação. Para isso podemos usar a diretiva ng-disabled. Veja um exemplo no qual temos dois botões, um para desabilitar e outro para habilitar uma caixa de texto:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cadastro de Alunos AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
</head>
<body>
<script type="text/javascript">
// vamos criar uma nova aplicação
var app = angular.module('MinhaApp', []);
// vamos criar o controller ExibirOcultarElemento
app.controller('HabilitarDesabilitarElemento', function ($scope){
// define o controle como desabilitado
$scope.desabilitado = true;
// função para habilitar o elemento
$scope.habilitar = function(){
$scope.desabilitado = false;
};
// função para ocultar o elemento
$scope.desabilitar = function(){
$scope.desabilitado = true;
};
});
</script>
<div ng-app="MinhaApp" ng-controller="HabilitarDesabilitarElemento">
Digite seu nome: <input type="text" id="txtNome" ng-disabled="desabilitado"/>
<button ng-click="habilitar()">Habilitar</button>
<button ng-click="desabilitar()">Desabilitar</button>
</div>
</body>
</html>
|
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de AngularJS |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
