angular ng-repeat 内的单选按钮组验证

Question

我正在尝试在 angular 的 ng-repeat 中实现单选按钮组验证。

HTML

<div ng-repeat="driver in drivers">
  <input required type="radio" value="M" name="driverGender" ng-model="driver.gender">
  <input required type="radio" value="F" name="driverGender" ng-model="driver.gender">
</div>

名称属性应在每次重复时更改。我尝试附加 $index 值，但在动态添加和删除驱动程序时它无法正常工作。实现这个的最佳方法是什么？

Answer 1

在您的代码中，所有单选按钮将相互关联，因为所有单选按钮的名称属性都是相同的。您应该识别每个单选按钮组。例如：

<div ng-repeat="driver in drivers">
   <input required type="radio" value="M" name="driverGender[{{driver.id}}]" ng-model="driver.gender">
   <input required type="radio" value="F" name="driverGender[{{driver.id}}]" ng-model="driver.gender">
</div>

Answer 2

您可以根据索引值更改名称属性，您可以在下面查看我的答案吗link

在控制器中

 $scope.drivers = [{id:1,name:'test',gender:'M'}];

在html

<div ng-repeat="driver in drivers">
  <input required type="radio" value="M" name="driverGender{{$index}}" ng-model="driver.gender">
  <input required type="radio" value="F" name="driverGender{{$index}}" ng-model="driver.gender">
</div>

https://plnkr.co/edit/byLRBhUI2Ezc5CofHnPC?p=preview

Answer 3

试试这个如果你需要像下面这样

认为他们是模型中的两次重复，那么视图的代码应该是这样的

<div ng-repeat="driver in drivers" class="ng-scope">
   <input required="" type="radio" value="M" name="driverGender0" ng-model="driver.gender"/>
   <input required="" type="radio" value="F" name="driverGender0" ngmodel="driver.gender">
</div>
<div ng-repeat="driver in drivers" class="ng-scope">
   <input required="" type="radio" value="M" name="driverGender1" ng-model="driver.gender"/>
   <input required="" type="radio" value="F" name="driverGender1" ngmodel="driver.gender"/>
</div>

所以这是获取这个的代码

<div ng-repeat="driver in drivers">
   <input required type="radio" value="M" name="driverGender{{$index}}" ng-model="driver.gender">
   <input required type="radio" value="F" name="driverGender{{$index}}" ngmodel="driver.gender">
</div>

Answer 4

最后我找到了一个解决方案。

<div ng-repeat="driver in drivers">
   <div ng-form="radioForm">
      <input required type="radio" value="M" name="driverGender{{$index}}" ng-model="driver.gender">
      <input required type="radio" value="F" name="driverGender{{$index}}" ngmodel="driver.gender">
      {{radioForm.$error}}
   </div>
</div>

现在通过 ng-form 进行验证。单选按钮将被分组，因为 $index.

angular ng-repeat 内的单选按钮组验证

Radio button group validation inside angular ng-repeat

angularjs

radio-button

radiobuttonlist