hide div 표시 각도 숨기기

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> 

는 또한 페이지 로딩에 표시하는 최초의 사업부를 원하므로이 시도 :

#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 및 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> 

을 사용할 수 있습니다