参见JsBin
我有一个由ng-repeat
生成的动态检查点
列表,每个项目都有六个单选按钮。我需要将每个集合绑定(bind)到 $scope
对象。
在下面,您可以看到我已将名称设置为 selectedOption1
、selectedOption2
等...这允许每个 ng-repeated
列表独立于下一个。现在,我需要将这些 selectedOptionX
组的选定选项绑定(bind)到 $scope
对象,同时仍然维护对象中的 checkpoint.Name
.
<table>
<tbody>
<tr ng-repeat="checkpoint in checkpoints">
<td>{{checkpoint.Name}}</td>
<td><input type="radio" name="selectedOption{{$index}}" value="pass" /></td>
<td><input type="radio" name="selectedOption{{$index}}" value="fail" /></td>
<td><input type="radio" name="selectedOption{{$index}}" value="remediated" /></td>
<td><input type="radio" name="selectedOption{{$index}}" value="nc" ng-checked="true" /></td>
<td><input type="radio" name="selectedOption{{$index}}" value="na" /></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
输出对象可能类似于:
[
{
Name: "the first checkpoint",
Value: "remediated"
},
{
Name: "the second checkpoint",
Value: "fail"
},
{
Name: "the third checkpoint",
Value: "pass"
},
];
我已经尝试过...
<td><input type="radio" name="selectedOption{{$index}}" value="pass" ng-model="selectedOption{{$index}}"/></td>
//and
<td><input type="radio" name="selectedOption{{$index}}" value="pass" ng-model="selectedOption[$index]"/></td>
//and
<td><input type="radio" name="selectedOption{{$index}}" value="pass" ng-model="selectedOption.$index"/></td>
//and
<td><input type="radio" name="selectedOption{{$index}}" value="pass" ng-model="checkpoint.Name"/></td>
我也尝试过其他一些方法,但没有什么可以接近的。
最佳答案
<table>
<tbody>
<tr ng-repeat="checkpoint in checkpoints">
<td>{{checkpoint.Name}}</td>
<td><input type="radio" ng-model="checkpoint.selectedOption" value="pass" name="selectedOption{{$index}}"></td>
<td><input type="radio" ng-model="checkpoint.selectedOption" value="fail" name="selectedOption{{$index}}"></td>
<td><input type="radio" ng-model="checkpoint.selectedOption" value="remediated" name="selectedOption{{$index}}"></td>
<td><input type="radio" ng-model="checkpoint.selectedOption" value="nc" name="selectedOption{{$index}}" ng-checked="true"></td>
<td><input type="radio" ng-model="checkpoint.selectedOption" value="nc" ng-checked="true" name="selectedOption{{$index}}"></td>
<td><input type="radio" ng-model="checkpoint.selectedOption" value="x" name="selectedOption{{$index}}"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
关于javascript - 将 ng-model 与多个 ng-repeated 单选按钮组一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25060842/