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

【问题标题】：Angular: Population of Radio button groups in loop(ng-repeat) - selection not workingAngular：循环中单选按钮组的数量（ng-repeat）-选择不起作用
【发布时间】：2016-09-27 10:21:41
【问题描述】：

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

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

如果我手动为循环中的每个组提供唯一的“名称”并且不使用 index.html，一切正常。但我不能这样做，因为列表将是动态的并且没有唯一的名称。我必须依靠索引来为每个组生成唯一的名称。

我在这里错过了什么？

【问题讨论】：

标签： javascript html angularjs radio-button ng-repeat

【解决方案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>

【讨论】：

谢谢！这使它工作。需要深入研究表达式语法。再次感谢。
不客气，很高兴看到有人帮助了我 :)

【解决方案2】：

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

【讨论】：

您好，Dev-One..谢谢！但我不能真正做到这一点..我知道如果我删除索引它将起作用 - 我正在使用索引为组派生唯一的“名称” - 在实际情况下，我没有每个组的唯一名称。我更感兴趣的是为什么使用索引会导致问题。
这将破坏单选按钮的分组，因为它们将有两个不同的“名称”。现在得到了答案。我的表达式语法错误。请参考其他答案