angularJs Radio button not visible?

Question

Hi I'm creating an angularJs App. The forms work fine but the radio buttons won't appear. All I can see the labels but not the actual buttons. I've followed instructions online but it seems to be hidden. I'm trying to create a set of 6 radio buttons where the user has to choose only one button.

my plunker

The below is one of the form partials.

Thanks

<div>
  <div class="form-wrapper">
    <p>Choose a fund</p>


<br>

To help you decide which fund is right for you, we've provided a summary of each below.
<br>
 Simply click on the magnifying glass to view the individual fund details.
<br>
 You can also compare all funds in this risk category using the fund comparison button at the bottom.
<br>
 When you've reviewed your options and have made your choice, click 'select'.
<br>
<br>
  <!-- <form class="form-horizontal" role="form">-->
     <!-- <div class=" form-group">-->
       <!-- <div class="col-sm-6">-->
         <!-- <div class="form-group">-->








    <label for="pearRadio">SEI Balanced Fund</label>
    <input id="pearRadio" type="radio" ng-model="fruitValue" value="pear" /><br />

    <label for="peachRadio">7IM AAP Balanced Acc Strategy</label>
    <input id="peachRadio" type="radio" ng-model="fruitValue" value="peach" /><br />

    <label for="apricotRadio">Close Balanced Portfolio Fund Accumulation</label>
    <input id="apricotRadio" type="radio" ng-model="fruitValue" value="apricot" /><br />
    <label for="pearRadio">Allianz RiskMaster Moderate</label>
    <input id="pearRadio" type="radio" ng-model="fruitValue" value="pear" /><br />

    <label for="peachRadio">Schroder MM Diversity Balanced Fund Accumulation</label>
    <input id="peachRadio" type="radio" ng-model="fruitValue" value="peach" /><br />

    <label for="apricotRadio">Goldman Sachs Dynamic</label>
    <input id="apricotRadio" type="radio" ng-model="fruitValue" value="apricot" /><br />
    <br />

    <strong>Selected Fund:</strong> {{fruitValue}}
  </div>


      <button class="btn btn-primary"
ng-click="goToNextState('form.account')">Next</button>
    </form>
  </div>
</div>

I don't see the radio button HTML snippet in your plunker.

Shashank Agrawal
– Shashank Agrawal

2014-12-30 13:23:39 +00:00
Commented Dec 30, 2014 at 13:23 — Shashank Agrawal
– Shashank Agrawal, Commented Dec 30, 2014 at 13:23

Philip Enc · Accepted Answer · 2014-12-30 23:47:44Z

1

First of all, do not repeat values if you want that a user choose only one radio button.
Check the .form-wrapper class css properties, maybe input opacity is 0 or display none...
I made a demo based on your code and works fine:
```
<input id="pearRadio1" type="radio" ng-model="fruitValue" value="pear1" />
```
I made some changes on the values.

DEMO: http://jsfiddle.net/ba80g13e/

answered Dec 30, 2014 at 23:47

Philip Enc

1,07216 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angularJs Radio button not visible?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related