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

Question

I’m a beginner in Angularjs, and I don’t know how to proceed in this case.

I know how to 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">
    Clica!
  </div>
  &ltdiv ng-show="visivel">
    Eu só vou aparecer quando visivel === true
  </div>
</div>

Only I don’t know how to do this when there is only one panel. But what if there are multiples?

For example, how could I do all the div.toggle-box have this function of switching visibility?

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

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

...

&ltdiv class="toggle-box">
  &ltdiv ng-click="visivel = !visivel">
    Enésimo painel
  </div>
  &ltdiv ng-show="visivel">
    Eu só vou aparecer quando visivel === true
  </div>
</div>

Answer 1

simply Voce 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>

Answer 2

I found a solution to the problem.

I will have to create a single controller for this type of div, and for each div.toggle-box that I create, I will have to insert the attribute ng-controller pointing to the created controller.

I figured by doing this, all the div.toggle-box that I create would use the same controller (same object), but the angular instance a single controller for each time it is called.

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