Угловые элементы отображения, переключатель

#angularjs #scope #radio #ng-show #angularjs-ng-model

#angularjs #область #переключатель #angularjs-ng-model #ng-показать

Вопрос:

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

Ответ №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 на 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, если нет, не показывайте.

Вот кодовое определение

Ссылка для ng-show

1. В чем смысл публикации ответа, даже если такой же ответ уже есть?

2. Я увидел это первым. Извините, я не понял, что кто-то ответил до того, как я обновил страницу?

3. Нет проблем, но нет смысла публиковать идентичный ответ, если он уже опубликован.

Ответ №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>

Я надеюсь, что это поможет!