Angularjs 有棱角的ng repeat中单选按钮的名称

我有一个项目列表，其中包含一个字段，该字段的值来自固定列表。 我想在表单中将这些显示为单选按钮

我把代码简化了一点

HTML：

<div ng-app='MyApp'>
    <div ng-controller="MyCtrl">
        <form>
            <div ng-form ng-repeat="item in list" name="itemForm">
                <div style="border: 1px solid black">
                     <h4>Item {{$index}}</h4>

                    <label>
                        <input type="radio" name="color" ng-model="item.color" value="red" required />red</label>
                    <label>
                        <input type="radio" name="color" ng-model="item.color" value="blue" required />blue</label>
                    <label>
                        <input type="radio" name="color" ng-model="item.color" value="green" required />green</label>
                    <p ng-show="itemForm.color.$error.required">
                        Must choose a color
                    </p>
                    <p>Actual color is {{item.color}}</p>
                </div>
            </div>
        </form>
    </div>
</div>

由于所有单选按钮之间共享名称，因此始终只选择一个单选按钮。但是，当未选择任何值时，我确实希望看到一条错误消息，并且我希望阻止用户单击提交按钮

---

是否有解决方法？

您需要为每组单选按钮创建不同的名称。在

ng repeat

中执行此操作的方法是使用

$index

：

<div ng-form ng-repeat="item in list" name="itemForm">
    <label>
      <input type="radio" name="color{{$index}}" 
             ng-model="item.color" value="red" required />red</label>
    <label>
      <input type="radio" name="color{{$index}}" 
             ng-model="item.color" value="blue" required />blue</label>
    <label>
      <input type="radio" name="color{{$index}}" 
             ng-model="item.color" value="green" required />green</label>
  </div>

红色
蓝色
绿色

您需要为每组单选按钮创建不同的名称。在

ng repeat

中执行此操作的方法是使用

$index

：

<div ng-form ng-repeat="item in list" name="itemForm">
    <label>
      <input type="radio" name="color{{$index}}" 
             ng-model="item.color" value="red" required />red</label>
    <label>
      <input type="radio" name="color{{$index}}" 
             ng-model="item.color" value="blue" required />blue</label>
    <label>
      <input type="radio" name="color{{$index}}" 
             ng-model="item.color" value="green" required />green</label>
  </div>

红色
蓝色
绿色

您应该在ng repeat中使用$index。 例如：

---

这将对您有所帮助。

您应该在ng repeat中使用$index。 例如：

这对你有帮助