2

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

1

2 Respostas 2

6

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.

2

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;
}]);

JSFiddle

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .