角显示元素，单选按钮答案

【问题标题】：Angular show elements, radio button角显示元素，单选按钮
【发布时间】：2017-02-14 00:48:23
【问题描述】：

在 Angular 中，我正在做这样的事情来在点击链接时显示和隐藏元素。

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

【问题讨论】：

酷。你试过什么？你有什么问题？

标签： angularjs scope radio ng-show angularjs-ng-model

【解决方案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，您需要对这两个单选按钮应用两个不同的值。

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

【讨论】：

【解决方案2】：

您需要使用ng-model 作为单选按钮，然后将ng-show 放在divs 上：

<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 是否设置为该值。如果是，则显示该div，如果不是，则不显示。

这是CodePen

Reference for ng-show

【讨论】：

即使已经有相同的答案，发布答案是什么意思？
我第一次看到。抱歉，在我刷新页面之前我没有意识到有人回答了？
没问题，但是如果已经发布了相同的答案，则发布相同的答案没有任何意义。

【解决方案3】：

我认为这可能是您正在寻找的。将 ng-model 与您的单选按钮一起使用。然后查看div上的model值（结合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>

希望对你有帮助！

【讨论】：