Click for more than one item

Asked

Viewed 62 times

1

People need to click on each BTN open a content with information, in the example each click open the 3 contents, how to make dynamic this click and each button open its content, open one at a time, similar to a tooltip behavior.

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>

angularjs

  • Samuel, what behavior do you expect when I open one piece of content and click another? I keep the first open, or want to show only one content at a time?

  • The behavior is to open one at a time, if open the first the others are closed.

3 answers

0

There are several ways to do this, such as creating a display variable for each content, and checking in the click function which one 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>

  • Is it possible for behavior to be dynamic, a box for everyone and open one at a time? I’ll have several open boxes, I can’t set, 1,2,3...there could be 50 for example...

0


Separate visibility control from 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>

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>

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.