javascript - angularJs 单选按钮不可见?

标签 javascript jquery angularjs radio-button

嗨,我正在创建一个 angularJs 应用程序。表单工作正常,但单选按钮不会出现。我只能看到标签,但看不到实际的按钮。我已按照网上说明进行操作,但它似乎被隐藏了。我正在尝试创建一组 6 个单选按钮,用户只需选择一个按钮。

my plunker

下面是其中一种表单部分。

谢谢

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

最佳答案

  1. 首先,如果您愿意,请不要重复值 用户仅选择一个单选按钮。

  2. 检查 .form-wrapper 类 css 属性,也许 输入不透明度为 0 或不显示...

  3. 我根据您的代码制作了一个演示并且运行良好:

    <input id="pearRadio1" type="radio" ng-model="fruitValue" value="pear1" />
    

    我对这些值进行了一些更改。

演示:http://jsfiddle.net/ba80g13e/

关于javascript - angularJs 单选按钮不可见?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27705291/

相关文章:

jquery - 如何让页面在点击 # 链接时不滚动到顶部?

angularjs - 在 karma jasmine 中测试 $http.post 方法

javascript - 在 TypeScript 中获取 jQuery 插件到 "see"jQuery

javascript - 浏览器公开了哪些服务,例如 XMLHttpRequest?

Javascript post请求一键多值

jquery - 使用jquery将特定列值从一个html表传递到另一个html表

angularjs - 有条件地在 ng-repeat 中应用 angularjs 自定义过滤器

angularjs - 将 forerunnerDb 引导到 angular-electron 应用程序中

javascript - 为什么这个内部对象字面量等于另一个对象

javascript - 加载外部文件变量,同时避免浏览器外部文件缓存