嵌套ng中的Angularjs单选按钮重复未选中

Angularjs Radio Buttons in Nested ng-repeat not checked

本文关键字：单选按钮 ng 中的 Angularjs 嵌套      更新时间：2023-09-26

我有一个html模板，其中一个ng重复嵌套在父ng重复中。父项ng repeat包含单选按钮，用户可以在其中选择"满意"或"不满意"，它们分别对应于值1和0。如果用户选择"不满意"，则会显示一个详细的选项列表，以便他们可以选择更多的收音机以获取更多信息。这是html；

<div class="group" ng-repeat="group in Groups">
<table>
    <tr>
        <td>{{group.Description}}</td>
        <td><input type="radio" value="1" name="{{group.Id}}" ng-model="group.SatisfactionLevel" /></td>
        <td><input type="radio" value="0" name="{{group.Id}}" ng-model="group.SatisfactionLevel" /></td>
    </tr>
</table>
<div class="group-detail" ng-class="{'hidden': group.SatisfactionLevel != 1}">
    <table>
        <tr ng-repeat="item in group.Details">
            <td>{{item.Description}}</td>
            <td><input type="radio" value="1" name="{{item.Id}}" ng-model="item.SatisfactionLevel" /></td>
            <td><input type="radio" value="0" name="{{item.Id}}" ng-model="item.SatisfactionLevel" /></td>
        </tr>
    </table>
</div>

从服务器返回的json如下所示；

"Groups": [
        {
            "Id":"AA",
            "Description":"Service",
            "SatisfactionLevel":1,
            "Details":[{"Id":"AA1","Description":"Cleanliness","SatisfactionLevel":1},
                       {"Id":"AA2","Description":"Timeliness","SatisfactionLevel":1}
                      ]
        },
        {
            "Id":"AB",
            "Description":"Food",
            "SatisfactionLevel":1,
            "Details":[{"Id":"AB1","Description":"Price","SatisfactionLevel":1},
                       {"Id":"AB2","Description":"Portion","SatisfactionLevel":1}
                      ]
        }          
      ]

除了嵌套ng repeat中的单选按钮未选中外，其他一切都正常。我可以在fiddler中看到满意级别属性包含值。有人看到我哪里错了吗？感谢

更新

代码确实没有什么问题。结果表明，Groups中的不同项可以包含相同的Details项。由于我使用name="{{item.Id}}"作为name属性，所以其他组详细信息中具有相同名称但不同值的其他无线电会导致以前具有相同名称的无线电被取消选中。这是我的解决办法；

<td><input type="radio" value="1" name="{{group.Id}}-{{item.Id}}" ng-model="item.SatisfactionLevel" /></td>

因为组id是唯一的。

首先，您在两个input中都有相同的值——我猜这是拼写错误？

其次，如果您使用value="1"，它将被解释为字符串"1"，但您的模型是整数1。

相反，使用ng-value:

<input type="radio" ng-value="0" name="{{item.Id}}" ng-model="item.SatisfactionLevel">
<input type="radio" ng-value="1" name="{{item.Id}}" ng-model="item.SatisfactionLevel">
相关文章：