 |
Você está aqui: AngularJS ::: Angular / AngularJS + JavaScript ::: Diretivas AngularJS |
Usando a diretiva ng-change para detectar a mudança de estado em um input type checkboxQuantidade de visualizações: 3635 vezes |
|
Neste exemplo mostrarei como é possível usar a diretiva ng-change para detectar o estado atual de uma input type checkbox, ou seja, se ela está marcada ou desmarcada. Porém, a própria checkbox será responsável por informar o seu estado. Então, se ela estiver marcada, nós vamos ocultar uma DIV, e exibí-la em caso contrário. Note que a checkbox possui a diretiva ng-model para associá-la com a variável "marcada" colocada no $scope e a diretiva ng-change que chama a função mostrarDiv() sempre que o seu estado é alterado. Para controlar a visibilidade da DIV nós usamos a diretiva ng-show cujo valor vem da variável "visivel" colocada no $scope. Veja o código completo:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cadastro de Clientes 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('CadClientes', []);
// vamos criar o controller ClientesController
app.controller('ClientesController', function ($scope){
// a checkbox vai aparecer desmarcada inicialmente
$scope.marcada = false;
// para controlar a visibilidade da div
$scope.visivel = true;
// função para exibir ou ocultar a DIV
$scope.mostrarDiv = function(){
$scope.visivel = !$scope.marcada;
};
});
</script>
<div ng-app="CadClientes" ng-controller="ClientesController">
<form>
<input type="checkbox" name="ocultar" id="ocultar"
ng-change="mostrarDiv()" ng-model="marcada"> Ocultar DIV<br/>
</form>
<div id="texto" ng-show="visivel"><h1>Veja este texto</h1></div>
</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 |
|
Java - Como usar null em Java MySQL - Como adicionar uma chave primária a uma tabela MySQL usando o comando ALTER TABLE ADD PRIMARY KEY |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
