【发布时间】:2015-05-07 11:44:58
【问题描述】:
我有一个 html 模板,其中一个 ng-repeat 嵌套在父 ng-repeat 中。父 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 中的单选按钮没有被选中之外,一切正常。我可以在提琴手中看到 Satisfactionlevel 属性包含值。有人看到我哪里出错了吗?谢谢
更新
代码确实没有任何问题。事实证明,Groups 中的不同项目可以包含相同的 Details 项目。由于我使用name="{{item.Id}}" 作为名称属性,因此其他组详细信息中具有相同名称但值不同的其他无线电会导致先前具有相同名称的无线电未被选中。
这是我的解决方法;
<td><input type="radio" value="1" name="{{group.Id}}-{{item.Id}}" ng-model="item.SatisfactionLevel" /></td>
因为组 ID 是唯一的。
【问题讨论】:
标签: javascript angularjs