Question

我有一个项目列表，其中包含一个具有固定列表值的字段。我希望将这些显示为表单中的单选按钮。

我在一个小提琴中简化了一些代码。

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>

Answer 2

您应该在ng-repeat内使用$ index。例如：<input type="radio" name="color{{$index}}"/>

这将为您提供帮助。

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

2 个答案: