2

Tenho 3 DIVs e gostaria de manipula-las com botoes. Dependendo do botão, 2 DIVs vão ocultar e somente uma aparecera.

<div ui-view>
<div class="box1">
   conteudo
   <div>
   <button ng-click="Box2()">Funcao2</button>
   <button ng-click="Box3()">Funcao3</button>
   </div>
</div>
<div class="box-2"
            conteudo
             <div>
            <button ng-click="Voltar()">Voltar</button>
            </div>
</div>
<div class="box-3" >
            conteudo
         <div>
          <button ng-click="Voltar()">Voltar</button>
         </div>
</div>

4
  • sugiro que você fala um tour para entender melhor como funciona o site :) Commented 8/02/2018 às 17:59
  • Um código exemplo. Entao na box1 tem 2 botoes que vao ocultar a box1 e mostra a box2 ou a box3. E nas outras div voltar a mostrar a box1 Commented 8/02/2018 às 18:10
  • @AnderssonOS bem vindo ao fórum, você deseja mostrar/ocultar uma div de acordo com o botão clicado, certo? Isso é possível com Jquery, caso seja isso, posso deixar um exemplo como resposta para você. Commented 8/02/2018 às 18:12
  • @Jorge Só é possível fazer em Jquery? Em angular não é possível? Eu estava usando ng-if porem não consigo manipular as divs nas funções cliques. Commented 8/02/2018 às 18:15

2 Respostas 2

1

Você pode usar ng-show do angular e exibir ou esconder elementos quando uma flag estiver ativada. Exemplo:

angular.module('teste', []).controller('ctrl', function($scope) {
  $scope.conteudo1 = false;
  $scope.conteudo2 = false;

  $scope.funcao = function(item) {
    if (item == 1) {
      $scope.conteudo1 = true;
      $scope.conteudo2 = false;
    } else if (item == 2) {
      $scope.conteudo2 = true;
      $scope.conteudo1 = false;
    }
  }

  $scope.voltar = function() {
    $scope.conteudo1 = false;
    $scope.conteudo2 = false;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="teste" ng-controller="ctrl">
  <div class="box1" ng-show="!conteudo1 && !conteudo2">
    conteudo
    <div>
      <button ng-click="funcao(1)">Funcao2</button>
      <button ng-click="funcao(2)">Funcao3</button>
    </div>
  </div>
  <div class="box-2" ng-show="conteudo1">
    conteudo 1
    <div>
      <button ng-click="voltar()">Voltar</button>
    </div>
  </div>
  <div class="box-3" ng-show="conteudo2">
    conteudo 2
    <div>
      <button ng-click="voltar()">Voltar</button>
    </div>
  </div>
</div>

Dessa forma, o controle fica no controller do AngularJS como no exemplo, assim há flexibilidade quanto ao comportamento.

4
  • Exatamente isso lucas, porem a minha Div Conteúdo teria um grid com registros a div conteudo 2 seria a Div de Incluir e a Div conteudo 3 de alterar. Entao ao clicar no botao funcao teria que ocultar a div conteudo e só mostrar novamente ao clicar no botao voltar escondedo a a div atual. Commented 8/02/2018 às 18:22
  • Editei @AnderssonOS, veja se é isso
    – BrTkCa
    Commented 8/02/2018 às 18:26
  • Perfeito! Exatamente isso. Obrigado. Commented 8/02/2018 às 18:34
  • De nada. Se a resposta foi a solução, você pode marcar como aceita @AnderssonOS
    – BrTkCa
    Commented 8/02/2018 às 18:37
0

Você pode adicionar um ng-model a cada botão e conforme o valor de cada botão faz aparecer e desaparecer conteúdo.

Veja este exemplo retirado w3schools:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="">

Keep HTML: <input type="checkbox" ng-model="myVar" ng-init="myVar = true">

<div ng-if="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
<hr>
</div>

<p>The DIV element will be removed when the checkbox is not checked.</p>
<p>The DIV element will return, if you check the checkbox.</p>

</body>
</html>

O ng-if aceita valores booleanos, podes passar um função com retorno booleano.

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 .