1

Galera preciso que ao clicar em cada BTN abra um conteúdo com informações, no exemplo cada clique abrem os 3 conteúdos, como faço pra deixar dinâmico esse clique e cada botão abrir seu conteúdo, abrir um de cada vez, parecido com comportamento de um tooltip.

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

  $scope.abreConteudo = false;

  $scope.funcaoClicar = function() {
    $scope.abreConteudo = true;
  };

});
.box {
  margin-top: 50px;
  display: inline-block;
  min-width: 80px;
}
<html lang="pt" ng-app="myApp">

<body ng-controller="myCtrl">
  <section class="box">
    <button ng-click="funcaoClicar()">Botão 1</button>
    <div ng-show="abreConteudo">Conteúdo 1</div>
  </section>

  <section class="box">
    <button>Botão 2</button>
    <div ng-show="abreConteudo">Conteúdo 2</div>
  </section>

  <section class="box">
    <button>Botão 3</button>
    <div ng-show="abreConteudo">Conteúdo 3</div>
  </section>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

</body>

</html>

2
  • Samuel, qual o comportamento que você espera quando eu tenho um conteúdo aberto e clico em outro? Mantenho aberto o primeiro, ou deseja mostrar apenas um conteúdo por vez? 25/07/2017 às 13:02
  • O comportamento é abrir um de cada vez, se abrir o primeiro os outros ficam fechado. 26/07/2017 às 1:40

3 Respostas 3

0

Separe o controle de visibilidade de cada botão individualmente.

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

  $scope.abreConteudo = 
      {b0: false, b1:false, b2:false }; // uma flag para cada botão

  $scope.funcaoClicar = function(i) {

    // Caso deseje controlar os estados individualmente, comente a linha abaixo:
    $scope.abreConteudo = {};

    $scope.abreConteudo[i] = !$scope.abreConteudo[i]; // Inverte o estado
  };

});
.box {
  margin-top: 50px;
  display: inline-block;
  min-width: 80px;
}
<html lang="pt" ng-app="myApp">

<body ng-controller="myCtrl">
  <section class="box">
    <button ng-click="funcaoClicar('b0')">Botão 1</button>
    <div ng-show="abreConteudo.b0">Conteúdo 1</div>
  </section>

  <section class="box">
    <button ng-click="funcaoClicar('b1')">Botão 2</button>
    <div ng-show="abreConteudo.b1">Conteúdo 2</div>
  </section>

  <section class="box">
    <button ng-click="funcaoClicar('b2')">Botão 3</button>
    <div ng-show="abreConteudo.b2">Conteúdo 3</div>
  </section>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

</body>

</html>

0

Há várias maneiras para fazer isso, como por exemplo, criar uma variável de exibição para cada conteúdo, e verificar na função clique qual está sendo chamado, veja:

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  $scope.funcaoClicar = function(conteudo) {
    $scope.abreConteudo1 = (conteudo === 'conteudo1');
    $scope.abreConteudo2 = (conteudo === 'conteudo2');
    $scope.abreConteudo3 = (conteudo === 'conteudo3');
  };
});
.box {
  margin-top: 50px;
  display: inline-block;
  min-width: 80px;
}
<html lang="pt" ng-app="myApp">

<body ng-controller="myCtrl">
  <section class="box">
    <button ng-click="funcaoClicar('conteudo1')">Botão 1</button>
    <div ng-show="abreConteudo1">Conteúdo 1</div>
  </section>

  <section class="box">
    <button ng-click="funcaoClicar('conteudo2')">Botão 2</button>
    <div ng-show="abreConteudo2">Conteúdo 2</div>
  </section>

  <section class="box">
    <button ng-click="funcaoClicar('conteudo3')">Botão 3</button>
    <div ng-show="abreConteudo3">Conteúdo 3</div>
  </section>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

</body>

</html>

1
  • Tem como o comportamento ser dinâmico, um box pra todo mundo e aberto um por vez? Terei vários box abertos, não posso setar, 1,2,3...podem haver 50 por exemplo... 26/07/2017 às 1:43
0

É possível verificar qual botão foi clicado para alterar a visibilidade.

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

  $scope.conteudo1 = false;
  $scope.conteudo2 = false;
  $scope.conteudo3 = false;

  $scope.funcaoClicar = function(opcao) {

    switch (opcao) {
      case 1:
        $scope.conteudo1 = !$scope.conteudo1;
        break;
      case 2:
        $scope.conteudo2 = !$scope.conteudo2;
        break;
      case 3:
        $scope.conteudo3 = !$scope.conteudo3;
        break;
    }
  };

});
.box {
  margin-top: 50px;
  display: inline-block;
  min-width: 80px;
}
<html lang="pt" ng-app="myApp">

<body ng-controller="myCtrl">
  <section class="box">
    <button ng-click="funcaoClicar(1)">Botão 1</button>
    <div ng-show="conteudo1">Conteúdo 1</div>
  </section>

  <section class="box">
    <button ng-click="funcaoClicar(2)">Botão 2</button>
    <div ng-show="conteudo2">Conteúdo 2</div>
  </section>

  <section class="box">
    <button ng-click="funcaoClicar(3)">Botão 3</button>
    <div ng-show="conteudo3">Conteúdo 3</div>
  </section>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

</body>

</html>

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 .