angular ng-repeat 内的单选按钮组验证
Radio button group validation inside angular ng-repeat
我正在尝试在 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 值,但在动态添加和删除驱动程序时它无法正常工作。实现这个的最佳方法是什么?
在您的代码中,所有单选按钮将相互关联,因为所有单选按钮的名称属性都是相同的。您应该识别每个单选按钮组。例如:
<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>
您可以根据索引值更改名称属性,您可以在下面查看我的答案吗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>
试试这个如果你需要像下面这样
认为他们是模型中的两次重复,那么视图的代码应该是这样的
<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>
最后我找到了一个解决方案。
<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 中实现单选按钮组验证。
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 值,但在动态添加和删除驱动程序时它无法正常工作。实现这个的最佳方法是什么?
在您的代码中,所有单选按钮将相互关联,因为所有单选按钮的名称属性都是相同的。您应该识别每个单选按钮组。例如:
<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>
您可以根据索引值更改名称属性,您可以在下面查看我的答案吗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>
试试这个如果你需要像下面这样
认为他们是模型中的两次重复,那么视图的代码应该是这样的
<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>
最后我找到了一个解决方案。
<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.