Click for more than one item

Navigation
1

I need to click on each BTN to open a content with information, in the example each click open the 3 contents, how do I make this click dynamic and each button open its contents, open one at a time, similar to behavior a 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>
    
asked by anonymous 25.07.2017 / 14:41

3 answers

0

Separate the visibility control for each button individually. 

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>
    
25.07.2017 / 14:57
0

There are several ways to do this, such as creating a display variable for each content, and checking in the click function which is being called, see: 

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>
    
25.07.2017 / 14:57
0

You can check which button was clicked to change the visibility. 

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>
    
25.07.2017 / 15:02
Changes do not take effect when I change Schema, using mongodb and nodejs Help to optimize an index in mysql