Estou tentando usar a diretiva ng-if
para ocultar um botão assim que eu clicar em outro porem não consegui achar nenhum exemplo e achei a documentação pouco clara, alguém poderia me dar um exemplo?? usando esse caso do botão, ao clicar em um botão eu oculto o outro usando ng-if
2 Respostas
A diretiva ng-hide
esconde o elemento dependendo do resultado da expressão que for especificada no atributo.
Exemplo:
<button ng-hide="esconderBotao">Botao 1</button>
Caso a variável esconderBotao
esteja declarada no escopo e seja TRUE (ou algo equivalente) o botão será escondido (a classe .ng-hide é adicionada ao elemento).
Outro exemplo:
angular.module('App', [])
.controller('ExemploController', ['$scope', function($scope) {
$scope.esconderBotao1 = false;
$scope.botao1 = function() {
alert('Ok!');
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App">
<div ng-controller="ExemploController">
<button ng-click="botao1()" ng-hide="esconderBotao1">Botao 1</button>
<br /><br />
<button ng-click="esconderBotao1 = true" ng-show="!esconderBotao1">Esconder botão 1</button>
<button ng-click="esconderBotao1 = false" ng-show="esconderBotao1">Mostrar botão 1</button>
</div>
</div>
No exemplo acima, ao clicar no botão "Esconder", a variável esconderBotao1
(veja o ng-click) é setada para TRUE e o botão 1 é escondido automaticamente. Ao clicar no botão "Mostrar" a variável esconderBotao1
é setada para FALSE e o botao 1 é automaticamente exibido.
Obs.: Caso você não defina um valor para a variável no escopo o elemento o ng-hide não vai esconder o elemento por padrão.
O ng-if
não foi feito para ocultar a div mas sim eliminar do código ao abrir a pagina, caso for false irá sumir o determinado código.
O certo é utilizar o ng-show
e o ng-hide
para mostrar e ocultar, exemplo:
<div ng-app="app">
<div ng-controller="MainController">
<button ng-click="mostrar=!mostrar">Ação</button>
<div ng-show="mostrar">
<h3>Hello Word</h3>
</div>
</div>
angular.module('app', []).
controller('MainController', ['$scope', function ($scope) {
$scope.mostrar = false;
}]);
ngIf
serve para criar ou recriar elementos, não simplesmente exibir ou ocultar.