Angular：循环中的单选按钮组数量（ng-repeat）- 选择不起作用

Question

我试图在一个循环中填充多组单选按钮，并使用组名和索引的组合作为名称，以便对单选按钮进行唯一分组。问题是 - 只有循环中的最后一组选中了单选按钮。循环中的其他组没有任何检查。

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

如果我手动给循环中的每个组唯一的 'name' 并且不使用索引，一切正常。但我真的不能这样做，因为该列表将是动态的并且没有唯一的名称。我必须依靠索引为每个组生成唯一的名称。

我在这里错过了什么？

Answer 1

单选按钮需要唯一名称属性，当前发生的情况是在 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>

Updated Working Plunk

Answer 2

你可以使用 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>

Angular：循环中的单选按钮组数量（ng-repeat）- 选择不起作用

Angular: Population of Radio button groups in loop(ng-repeat) - selection not working

html

javascript

radio-button

angularjs

ng-repeat