Угловые элементы шоу, радиокнопка

Question

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

expression внутри ng-show делает чек ли flag является установленное значение. Если это так, покажите div, если нет, не показывайте.

Вот CodePen

Reference for ng-show

Answer 3

Я думаю, что это может быть то, что вы ищете. Используйте ng-model со своими переключателями. Затем проверьте значение модели на divs (в сочетании с 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> 

Надеюсь, это поможет!