javascript - 隐藏显示 div Angular

Question

我试图在每次单击按钮时隐藏和显示 div。基本上，如果单击第一个按钮，则显示第一个 div...如果单击第二个 div，则显示第二个 div。我的问题是它只显示和隐藏 div 一次。

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/