Скрыть показать div angular

Question

Я пытаюсь скрыть и показать div на каждом нажатии кнопки. В принципе, если первая кнопка нажата, отобразите первый div ... если второй щелкнул на div, отобразите второй div. Моя проблема в том, что она показывает и скрывает div только ONCE.

HTML:

<div ng-app="sandbox"> 
    <div layout="row" flex layout-align="center"> 
    <md-button ng-click="div1=true">Div 1</md-button> 
    <md-button ng-click="div2=true">Div 2</md-button> 
    </div> 
    <section layout="row"> 
    <div ng-hide="div2" ng-show="div1" flex> 
     <md-card> 
     <md-card-content> 
      <p>This is Div 1</p> 
     </md-card-content> 
     </md-card> 
    </div> 
    <div ng-hide="div1" ng-show="div2" id="div2" flex> 
     <md-card> 
     <md-card-content> 
      <p>This is Div 2</p> 
     </md-card-content> 
     </md-card> 
    </div> 
    </section> 
</div> 

хотят также первый DIV, чтобы показать на странице загрузки, поэтому попытался это:

#div2 { 
    display:none; 
} 

, но теперь он не будет переключаться на #div2 на всех

JSFiddle Demo

Answer 1

Используйте команду ng-init для инициализации состояния по умолчанию, а затем используйте только одну переменную, чтобы определить, какая из них видима.

<div ng-app="sandbox" ng-init="visibleDiv='div1'"> 
    <div layout="row" flex layout-align="center"> 
    <md-button ng-click="visibleDiv='div1'">Div 1</md-button> 
    <md-button ng-click="visibleDiv='div2'">Div 2</md-button> 
    </div> 
    <section layout="row"> 
    <div ng-show="visibleDiv == 'div1'" flex> 
     <md-card> 
     <md-card-content> 
      <p>This is Div 1</p> 
     </md-card-content> 
     </md-card> 
    </div> 
    <div ng-show="visibleDiv == 'div2'" id="div2" flex> 
     <md-card> 
     <md-card-content> 
      <p>This is Div 2</p> 
     </md-card-content> 
     </md-card> 
    </div> 
    </section> 
</div> 

https://jsfiddle.net/fsxa8xcc/1/

Answer 2

После первого щелчка, вы установили как div1 и div2 в true. Но у вас есть ng-hide="div2" ng-show="div1", где ng-show и ng-hide оба будут всегда true.

Я обновил вашу скрипку и изменил код, как показано ниже.

Fiddle: https://jsfiddle.net/balasuar/fsxa8xcc/2/

Примечание: При загрузке, они оба являются невидимыми, и если вы хотите, чтобы показать одну из них вы можете использовать ng-init="show=div1"

<div ng-app="sandbox"> 
    <div layout="row" flex layout-align="center"> 
    <md-button ng-click="show='div1'">Div 1</md-button> 
    <md-button ng-click="show='div2'">Div 2</md-button> 
    </div> 
    <section layout="row"> 
    <div ng-show="show=='div1'" flex> 
     <md-card> 
     <md-card-content> 
      <p>This is Div 1</p> 
     </md-card-content> 
     </md-card> 
    </div> 
    <div ng-show="show=='div2'" id="div2" flex> 
     <md-card> 
     <md-card-content> 
      <p>This is Div 2</p> 
     </md-card-content> 
     </md-card> 
    </div> 
    </section> 
</div>