单选按钮与 ng-repeat 的行为奇怪

Posted 2023-03-11

【中文标题】单选按钮与 ng-repeat 的行为奇怪

【英文标题】：Radio button acts strangely with 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吗？

【参考方案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中。