隐藏显示div角

我想隐藏和每个按钮单击显示div。基本上，如果第一个按钮被点击显示第一个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; 
}

，但现在它不会在所有

切换到#div2JSFiddle Demo

来源

2016-11-07 user4756836

使用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/

来源

2016-11-07 01:32:44 AndreFeijo

第一次点击后，同时设置了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>

来源

2016-11-07 01:36:51 Aruna

隐藏显示div角

回答

相关问题