Angular 显示元素，单选按钮

Question

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

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，您需要像这样对两个单选按钮应用两个不同的值。

<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 作为单选按钮，然后将 ng-show 放在 div 上：

<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

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>

希望对您有所帮助！

Angular 显示元素，单选按钮

Angular show elements, radio button

scope

radio

angularjs

ng-show

angularjs-ng-model