ng-repeat单选按钮双向绑定问题,只有最后一项设置正确

时间:2015-09-15 12:38:13

标签: angularjs input radio-button ng-repeat angularjs-ng-value

我正在使用angularjs使用以下代码重复单选按钮组。

<div class="row observation-point"
         ng-repeat="observationPoint in question.observationPointList">
        <div class="col-md-6 col-sm-6">
            <small>{{observationPoint.text}}</small>
        </div>
        <div class="col-md-4 col-sm-4 col-md-offset-2 col-sm-offset-2">
            <label class="radio-inline">
                <input type="radio" ng-disabled="observation.status != 'Open'"
                       name="{{domain.id}}-{{question.id}}-{{observationPoint.id}}"
                       id="{{domain.id}}-{{question.id}}-{{observationPoint.id}}-1" ng-value="true"
                       ng-model="observationPoint.observed">{{'observation-domain.html.yes' | translate}} {{observationPoint.observed}}
            </label>
            <label class="radio-inline">
                <input type="radio" ng-disabled="observation.status != 'Open'"
                       name="{{domain.id}}-{{question.id}}-{{observationPoint.id}}"
                       id="{{domain.id}}-{{question.id}}-{{observationPoint.id}}-0" ng-value="false"
                       ng-model="observationPoint.observer">{{'observation-domain.html.no' | translate}}
            </label>


        </div>
    </div>

角度1.2.28这个工作正常,但我们最近升级到1.4.2,现在结果如下图所示。

enter image description here

模型值在变量中正确保存和恢复(参见图像中的真值和假值),但重新加载页面后只选择ng-repeat中的最后一个单选按钮。

为什么会发生这种情况,因为我真的不明白问题是什么以及如何解决这个问题。

NB。 observationPoint.observer包含布尔值而不是字符串

编辑:我已经创建了一个简化的plunker,当然这可以按预期工作:S http://plnkr.co/edit/tWjizHB8I5FNZVOgdq6J?p=preview

这会暗示命名或id有问题。 但是,当我检查开发人员工具ID和名称似乎很好 enter image description here

1 个答案:

答案 0 :(得分:3)

如果我从

更改动态名称,我找到了解决方案
name="{{domain.id}}-{{question.id}}-{{observationPoint.id}}"

name="observationPoint_{{observationPoint.id}}"

它没有任何障碍。我认为存在某种加载/计时问题。在呈现UI时,变量可能不是唯一的,只会导致设置最后一项。