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

<!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="{{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>

关于javascript - Angular :循环中的单选按钮组填充(ng-repeat)-选择不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37511234/

10-13 23:43