How to make multiple divs that alternate between visible and invisible?

Navigation
0

I am a beginner in AngularJS, and I do not know how to proceed in this case.

I create a panel that can appear and disappear as a variable in the controller, like this: 

&ltdiv class="toggle-box">
  &ltdiv ng-click="visivel = !visivel"&gt
    Clica!
  &lt/div&gt
  &ltdiv ng-show="visivel"&gt
    Eu só vou aparecer quando visivel === true
  &lt/div&gt
&lt/div&gt

Only I do not know how to do this when there is only one panel. But what if there are multiple?

For example, how could I make all div.toggle-box have this visibility toggle function? 

&ltdiv class="toggle-box">
  &ltdiv ng-click="visivel = !visivel"&gt
    Primeiro painel
  &lt/div&gt
  &ltdiv ng-show="visivel"&gt
    Eu só vou aparecer quando visivel === true
  &lt/div&gt
&lt/div&gt

&ltdiv class="toggle-box">
  &ltdiv ng-click="visivel = !visivel"&gt
    Segundo painel
  &lt/div&gt
  &ltdiv ng-show="visivel"&gt
    Eu só vou aparecer quando visivel === true
  &lt/div&gt
&lt/div&gt

...

&ltdiv class="toggle-box">
  &ltdiv ng-click="visivel = !visivel"&gt
    Enésimo painel
  &lt/div&gt
  &ltdiv ng-show="visivel"&gt
    Eu só vou aparecer quando visivel === true
  &lt/div&gt
&lt/div&gt
    
asked by anonymous 03.08.2018 / 17:29

2 answers

0

I found a solution to the problem.

I'll have to create a single controller for this type of div, and for every% of% I create, I'll have to enter the div.toggle-box attribute by pointing to the created controller.

I figured doing this, all the% w_that I created would use the same controller (same object), but the angular instantiates a single controller for each time it is called.

It seems that I still have enough to learn about how angular works ...

    
08.08.2018 / 21:57
0

Just pull up the ng-show as below: 

<div class="toggle-box" ng-show="visivel">
  <div ng-click="visivel = !visivel">
    Enésimo painel
  </div>
  <div>
    Eu só vou aparecer quando visivel === true
  </div>
</div>
    
03.08.2018 / 18:50
Hello World at React.JS does not work! Open partial view by passing parameter