 |
Você está aqui: AngularJS ::: Angular / AngularJS + JavaScript ::: Diretivas AngularJS |
Usando as diretivas ng-show e ng-hide do AngularJS para exibir ou ocultar elementos HTMLQuantidade de visualizações: 3665 vezes |
As diretivas ng-show e ng-hide do AngularJS são usadas para exibir ou ocultar elementos HTML. A diretiva ng-show define o valor display da propriedade style do elemento como 'block' e ng-show define o valor como 'none'. Veja o exemplo completo:
<!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('ExibirOcultarElemento', function ($scope){
// define a visibilidade inicial
$scope.visivel = true;
// função para exibir o elemento
$scope.exibir = function(){
$scope.visivel = true;
};
// função para ocultar o elemento
$scope.ocultar = function(){
$scope.visivel = false;
};
});
</script>
<div ng-app="MinhaApp" ng-controller="ExibirOcultarElemento">
<h1 ng-show="visivel">Você está me vendo?</h1>
<button ng-click="exibir()">Exibir</button>
<button ng-click="ocultar()">Ocultar</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 |
