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/

Answer 2

首次点击后，您将div1和div2都设为true。但是你有ng-hide="div2" ng-show="div1" ng-show和ng-hide两者都是true。

我已更新您的小提琴并更改了您的代码，如下所示。

小提琴：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>

隐藏显示div角度

2 个答案: