角 ng-repeat 内的单选按钮组验证答案

【问题标题】：Radio button group validation inside angular ng-repeat角 ng-repeat 内的单选按钮组验证
【发布时间】：2016-12-03 16:15:03
【问题描述】：

我正在尝试在 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 值，但在动态添加和删除驱动程序时它无法正常工作。实现这一点的最佳方法是什么？

【问题讨论】：

请帮忙
对 F 类似地使用 ng-if='driver"M"'

标签： angularjs radio-button radiobuttonlist

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

我试过这个。但是在动态添加和删除驱动程序时无法正常工作。
如果您动态添加驱动程序，您应该刷新模型以及动态添加驱动程序时
是的，模型会刷新，但元素不会再次编译。

【解决方案3】：

您可以根据索引值更改名称属性，您可以在以下链接中查看我的答案

在控制器中

 $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

【讨论】：

【解决方案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.

【讨论】：