角度ng-repeat內的單選按鈕組驗證

我試圖在角度的ng-repeat內部實現單選按鈕組驗證。角度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值，但在動態添加和刪除驅動程序時無法正常工作。什麼是實施這個最好的方法？

來源

2016-07-29 Jithu Rajan

請給它提琴 –

使用ng-if ='驅動程序「M」'同樣爲F –

最後我找到了一個解決方案。

<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形式。單選按鈕將被分組，因爲$ index。

來源

2016-08-03 05:06:01

在您的代碼中，所有單選按鈕將相互關聯，因爲所有單選按鈕的名稱屬性都是相同的。您應該識別每個單選按鈕組。例如：

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

來源

2016-07-29 04:51:33

你可以根據索引值更改名稱屬性，你可以在下面的鏈接

在控制器

$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

來源

2016-07-29 04:52:03

剛剛嘗試這一點。如果你需要像下面

想到自己是在模型重複兩次，那麼該視圖的代碼應該是這樣的

所以這是代碼爲得到這個

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

來源

2016-07-29 05:06:14

我試過這個。但是，當動態添加和刪除驅動程序時無法正常工作。 –

如果動態添加驅動程序，則應該刷新模型以及動態添加驅動程序 –

是的，模型將刷新，但不會再次編譯元素。 –

角度ng-repeat內的單選按鈕組驗證

回答

相關問題