角度显示元素，单选按钮

角度我正在做这样的事情来显示和隐藏元素，当一个链接被点击。角度显示元素，单选按钮

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

这两个单选按钮被取消选择开始，然后单击任何一个radio buttom将显示任一div。

来源

2016-10-05 ttmt

很酷。你有什么尝试？你的问题是什么？ –

在使用它之前，您需要使用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您需要将两个不同的值应用于这两个单选按钮。

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

来源

2016-10-05 14:15:44

您需要使用ng-model单选按钮，然后穿上div小号ng-show：

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

的expression的ng-show内做了检查flag是否设置为该值。如果是，则显示div，如果没有，则不显示。

这里是一个CodePen

Reference for ng-show

来源

2016-10-05 14:19:55 Dolan

发布答案的含义是什么，即使同一种答案已经存在？ –

我首先看到它。对不起，在我刷新页面之前，我没有意识到有人回答过？ – Dolan

没问题，但如果发布了相同的答案，则没有意义。 –

我认为这可能是你在找什么。在您的单选按钮上使用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>

我希望它有帮助！

来源

2016-10-05 14:27:51 Leo

角度显示元素，单选按钮

回答

相关问题