Проверка группы переключателей внутри углового ng-повторения

Question

Проверка группы переключателей внутри углового ng-повторения

0

Я пытаюсь выполнить проверку группы кнопок в угловом ng-повторе.

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, но он не работает должным образом, когда драйверы динамически добавляются и удаляются. Каков наилучший способ реализации этого?

Jithu Rajan 29 июль 2016, в 06:45

Источник

0

пожалуйста, поиграйте с этим
akhil viswam 29 июль 2016, в 04:32
0

Аналогично используйте ng-if = 'driver "M" для F
Naga Sai A 29 июль 2016, в 04:33

Теги:

angularjs

radio-button

radiobuttonlist

4 ответа

0

вы можете изменить атрибут имени на основе значения индекса, можете ли вы проверить мой ответ в следующей ссылке

В контроллере

 $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

Jenson Raby 29 июль 2016, в 03:16

0

В вашем коде все переключатели будут связаны друг с другом, потому что атрибут name для всех одинаковый. Вы должны идентифицировать каждую группу переключателей. Например:

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

Tilekbekov Yrysbek 29 июль 2016, в 03:11

0

Просто попробуйте это, если вам нужно, как показано ниже

Подумайте, что это два повтора в модели, тогда код представления должен быть таким

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

Shakir Ahamed 29 июль 2016, в 02:42

0

Я попробовал это. Но не работает нормально, когда драйверы добавляются и удаляются динамически.
Jithu Rajan 29 июль 2016, в 05:08
0

Если вы добавляете драйверы динамически, вы должны обновить модель, а также при динамическом добавлении драйверов.
Shakir Ahamed 29 июль 2016, в 05:13
0

Да, модель обновится, но элементы не будут скомпилированы снова.
Jithu Rajan 29 июль 2016, в 05:24

Показать ещё 1 комментарий

Ещё вопросы

Аналогично используйте ng-if = 'driver "M" для F
Я попробовал это. Но не работает нормально, когда драйверы добавляются и удаляются динамически.
Если вы добавляете драйверы динамически, вы должны обновить модель, а также при динамическом добавлении драйверов.
Да, модель обновится, но элементы не будут скомпилированы снова.

Jithu Rajan · Accepted Answer · 2016-08-03T02-12-00.000Z

Наконец, я нашел одно решение.

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