参见JsBin
我有一个由ng-repeat
生成的checkpoints
的动态列表,每个项目有六个单选按钮。我需要将每个集合绑定到一个$scope
对象。
下面,你可以看到我已经将名称设置为selectedOption1
, selectedOption2
等…这允许每个ng-repeated
列表独立于下一个。现在,我需要将这些selectedOptionX
组的选定选项绑定到$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"
},
];
What I've try…
<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>
我也试过其他方法,但都不如。
http://jsbin.com/haxor/1/edit
<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>
试试这个,它将在检查点对象中设置选定的值
http://jsbin.com/barufuhi/3/edit<div ng-controller="CheckpointsController">
<table>
<tbody>
<tr ng-repeat="checkpoint in checkpoints">
<td>{{checkpoint.Name}}</td>
<td><input type="radio" ng-model="checkpoint.value" value="one"></td>
<td><input type="radio" ng-model="checkpoint.value" value="two"></td>
<td><input type="radio" ng-model="checkpoint.value" value="three"></td>
<td><input type="radio" ng-model="checkpoint.value" value="four"></td>
<td><input type="radio" ng-model="checkpoint.value" value="five"></td>
<td><input type="radio" ng-model="checkpoint.value" value="six"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>