Angular ... ng-repeat中单选按钮的名称

Question

我有一个项目列表,其中包含一个具有固定列表值的字段.我想在表单中将这些显示为单选按钮.

我把代码简化了一下,简化了一下.

http://jsfiddle.net/my4k7Lo8/

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>

JS:

angular.module('MyApp', [])
    .controller('MyCtrl', ['$scope', function ($scope) {
    $scope.list = [{
        // no color set yet
    }, {
        color: "green"
    }, {
        color: "red"
    }];
}]);

由于所有单选按钮之间的共享名称,因此始终只选择一个单选按钮.我确实想要一个错误消息,但没有选择任何值,我想阻止用户单击提交按钮.

这有解决方法吗？

Answer 1

您需要为每组单选按钮创建不同的名称.您可以通过以下方式实现此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>