Angular: заполнение групп радиокнопок в цикле (ng-repeat) - выбор не работает

0

Я пытаюсь заполнить несколько групп переключателей в цикле и использовать комбинацию имени группы и индекса для имени, чтобы однозначно группировать переключатели. Проблема заключается в том, что только последняя группа в цикле имеет переключатель. Другие группы в цикле ничего не проверяют.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - Dynamically populate Radio buttons in a loop</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body ng-app="radioSetsExample">
  <script>
   angular.module('radioSetsExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
        $scope.groups = [{
            name: 'group_one',
            type: 'CHOOSE'
        }, {
            name: 'group_two',
            type: 'ADD'
        },
        {
            name: 'group_three',
            type: 'ADD'
        }];
    }]);
</script>
 <form ng-controller="ExampleController">
      <div class="radio-inline" ng-repeat="group in groups">
        {{group.name}} - TYPE:
        <label>
         <input type="radio" name="{{group.name}}_{{$index}}" value="CHOOSE" ng-model="group.type">
          Choose
        </label>
        <label>
         <input type="radio" name="{{group.name}}_{{$index}}" value="ADD" ng-model="group.type">
          Add
        </label>
      </div>
 </form>
</body>
</html>

Plunker

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

Что мне здесь не хватает?

Теги:
radio-button
ng-repeat

2 ответа

1
Лучший ответ

вы можете использовать name="{{group.name+'_'+$index}}" вместо name="{{group.name}}_{{$index}}" тогда должно быть хорошо.

<form ng-controller="ExampleController">
      <div class="radio-inline" ng-repeat="group in groups">
        {{group.name}} - TYPE:
        <label>
         <input type="radio" name="{{group.name+'_'+$index}}" value="CHOOSE" ng-model="group.type">
          Choose
        </label>
        <label>
         <input type="radio" name="{{group.name+'_'+$index}}" value="ADD" ng-model="group.type">
          Add
        </label>
      </div>
 </form>
Поделиться
  • 0
    Спасибо! Это заставляет это работать. Нужно больше копаться в синтаксисе выражения. Еще раз спасибо.
  • 0
    добро пожаловать и рад видеть, что кто-то помог мне :)
0

Радио-кнопки требуют уникального свойства имени, что происходит в настоящее время, так как итерация в ng-repeat, первая итерация дает одно и то же имя group_one_1 для добавления и выбора радио.

Было бы возможно:

<label>
   <input type="radio" name="choose_{{$index}}" value="CHOOSE" ng-model="group.type">
      Choose
</label>
<label>
   <input type="radio" name="add_{{index}}" value="ADD" ng-model="group.type">
       Add
</label>

Обновленный рабочий план

Поделиться
  • 0
    Привет Дев-Один .. Спасибо! Но я не могу этого сделать .. я знаю, что это сработает, если я удалю индекс - я использую индекс для получения уникальных имен групп - в реальном сценарии у меня нет уникальных имен для каждой группы. Меня больше интересует, почему использование индекса вызывает проблему.
  • 0
    @JohnbabuKoppolu смотрите обновление к ответу.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню