javascript - 将 ng-model 与多个 ng-repeated 单选按钮组一起使用

Question

参见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>

我也尝试过其他一些方法，但没有什么可以接近的。

Answer 1

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>