각도 쇼 요소, 라디오 버튼

Question

각도로 링크를 클릭하면 요소를 표시하거나 숨기려면 다음과 같이하십시오.

<a ng-click="showEle = !showEle"><span ng-bind="showEle ? 'Hide' : 'Show'"></span> Element</a> 
<div ng-if="showEle"> 
<div> 

비슷한 것을해야하지만 클릭하는 라디오 버튼에 따라 div를 표시해야합니다.

<input type="radio" name="element" value="did" id="">Div One</br> 
<input type="radio" name="element" value="did" id="">Div Two</br> 
<div> 
    Div One 
</div> 
<div> 
    Div two 
</div> 

두 라디오 버튼을 모두 선택 해제 한 다음 라디오 버튼을 클릭하면 두 개의 div 중 하나가 표시됩니다.

Answer 1

범위 변수를 사용하기 전에 init 변수가 필요합니다.

<input type="radio" name="element" value="did" ng-click="flag = 'div1'">Div One</br> 

<input type="radio" name="element" value="did" ng-click="flag = 'div2'" id="">Div Two</br> 

<div ng-show="flag == 'div1'"> 
    Div One 
</div> 

<div ng-show="flag == 'div2'"> 
    Div two 
</div> 

은이 같은 라디오 버튼 양쪽에 두 개의 서로 다른 값을 적용 할 필요가 ng-model 사용하십시오.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app=""> 
 
    
 
    <input type="radio" name="element" value="one" id="" ng-model="flag" />Div One<br /> 
 

 
    <input type="radio" name="element" value="two" id="" ng-model="flag" />Div Two<br /> 
 

 
    <div ng-show="flag == 'one'"> 
 
     Div One 
 
    </div> 
 

 
    <div ng-show="flag == 'two'"> 
 
     Div two 
 
    </div> 
 
    
 
</div>

ng-show 내부의 expression가 flag인지 검사를 수행합니다

<input type="radio" name="element" ng-value="div1" ng-model="flag">Div One</br> 
<input type="radio" name="element" ng-value="div2" ng-model="flag">Div Two</br> 

<div ng-show="flag == 'div1'"> 
    Div One 
</div> 
<div ng-show="flag == 'div2'"> 
    Div two 
</div> 

Answer 2

당신은 라디오 버튼에 대한 ng-model를 사용할 필요가 다음 div들에 ng-show를 넣어 값으로 설정하십시오. 그렇다면 div를 표시하고, 그렇지 않으면 표시하지 않습니다. 여기

내가이 당신을 위해 무엇을 찾고있는 수 있습니다 생각 CodePen

Reference for ng-show

Answer 3

입니다. 라디오 버튼과 함께 ng-model을 사용하십시오. 그런 다음 div (nd-show와 결합 된)에서 모델 값을 확인하십시오.

<label class="radio-label"><input type="radio" class="multiple-option" ng-model="ctrl.selectMsgStatus" ng-value="null" />Red</label> 
<label class="radio-label"><input type="radio" class="multiple-option" ng-model="ctrl.selectMsgStatus" ng-value="true" />Blue</label> 
<label class="radio-label"><input type="radio" class="multiple-option" ng-model="ctrl.selectMsgStatus" ng-value="false" />Green</label> 

<div style="background-color:red" ng-show="ctrl.selectMsgStatus == null">Red</div> 
<div style="background-color:blue" ng-show="ctrl.selectMsgStatus == true">Blue</div> 
<div style="background-color:green" ng-show="ctrl.selectMsgStatus == false">Green</div> 

도움이되기를 바랍니다.