hide div表示角を非表示

Question

私は各ボタンをクリックしてdivを表示して表示しようとしています。基本的に、最初のボタンがクリックされた場合、最初のdivを表示します... 2番目のdivがクリックされた場合、2番目のdivを表示します。私の問題は、divを一度しか表示しないことです。

HTML：

#div2 { 
    display:none; 
} 

が、今、それはすべての

で#div2に切り替わりません。

<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はページのロード時に表示したいですJSFiddle Demo

Answer 1

ng-initを使用してデフォルト状態を初期化し、次に1つの変数を使用してどの変数を表示するかを定義します。

<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とtrueとしてdiv2設定します。しかし、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> 

を使用することができます