【问题标题】:Radio button acts strangely with ng-repeat单选按钮与 ng-repeat 的行为奇怪
【发布时间】:2017-01-01 23:49:52
【问题描述】:

我有这个代码来生成单选按钮列表:

                <div ng-show="user.role != 'COLLABORATEUR'">
                <div class="form-group row clearfix">
                    <label for="roleRadio" class="col-sm-3 control-label">Role</label>
                    <div class="checkbox-demo-row"  ng-repeat="role in roles">
                    <div class="input-demo radio-demo row">
                            <label class="radio-inline custom-radio nowrap">
                                <input type="radio" id="roleRadio" name="roleRadio" ng-model="user.role">
                                <span>{{role.name}}</span>
                            </label>
                        </div>
                    </div>
                 </div>
            </div>

角色[{name:"SUPERCHEF"},{name:"CHEF"},{name:"COLLABORATEUR"}]

user.role{role:"SUPERCHEF"}

因此,正如日期所述,默认情况下应选择角色SUPERCHEF,但未选择任何按钮,当我点击任何给定按钮时,始终选择最后一个按钮,当我再次点击时,我可以点击任何我想要的地方.

【问题讨论】:

  • 你在重复 ID...
  • 你的意思是id="roleRadio"?因为我删除了它,它是相同的交易
  • 同时删除for="roleRadio"
  • 你能显示minimal reproducible example吗?

标签: javascript html angularjs


【解决方案1】:

[EDIT] 设置无线电输入的 ng-value:

<input type="radio" name="roleRadio" ng-model="user.role" ng-value="{{role.id}}">

并且需要设置默认值,例如:

$scope.user = {
    role: 'SUPERCHEF'
  };

【讨论】:

  • 感谢您的回答,但我需要使用 value="{{role.id}}" 而不是 ng-value"{{role.id}}"
  • 这一切都在documentation中。
猜你喜欢
  • 1970-01-01
  • 2018-09-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-09-20
  • 2013-09-24
  • 2022-11-11
  • 2013-05-02
相关资源
最近更新 更多