CODEWITHSUNDEEP
angularjsscoperadio-buttonangularjs-ng-modelng-show
ttmt
ttmt

Reputation: 4984

Angular show elements, radio button

in Angular I'm doing something like this to show and hide elements when a links is clicked.

<a ng-click="showEle = !showEle"><span ng-bind="showEle ? 'Hide' : 'Show'"></span> Element</a>
<div ng-if="showEle">
<div>

I need to do something similar but show a div based on a radio button being click.

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

Both radio buttons are deselected to start then clicking either radio buttom will show either div.

Upvotes: 0

Views: 402

Answers (3)

Dolan
Dolan

Reputation: 1647

You need to use ng-model for the radio button, then put ng-show on the 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>

the expression inside the ng-show does a check whether the flag is set to the value. If it is, show the div, if not, don't show.

Here is a CodePen

Reference for ng-show

Upvotes: 1

Leo
Leo

Reputation: 419

I think this might be what you are looking for. Use ng-model with your radio buttons. Then check the model value on the divs (combined with 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>

I hope it helps!

Upvotes: 0

Mohit Tanwani
Mohit Tanwani

Reputation: 6628

You need to init scope variable before using it.

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

To use ng-model you need to apply two different values to both the radio button like this.

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

Upvotes: 1

Related Questions