ng-repeat指令中的单选按钮在AngularJS中不起作用

Question

我在指令中有一组单选按钮。该指令有一个 ng-repeat，因此它存在多次。

我能够填充指令的输入字段，但单选按钮不会做出反应。

angular.module('account-form-client-de', [])
  .controller('ctrl', function($scope) {
    $scope.owners = [];
    $scope.addOwner = function() {
      $scope.owners.push({
        class: 'person',
        name: 'new owner',
        percentage: 0
      });
    }

    $scope.addOwner();
    $scope.addOwner();
  })
  .directive("newOwner", function() {
    var options = {
      restrict: 'E',
      replace: true,
      scope: {
        owner: '=',
        remove: '&'
      },
      link: function(scope, element, attrs, controller, $parent) {

      },
      template: `
      <div class="table-owners item-row">
        <div class="checkbox">
            <input type="radio" name="type" ng-model="owner.class" value="person" validate-on-change>
            <label for="person" translate>
                table_owners.person
            </label>
        </div>
        <div class="checkbox">
            <input type="radio" name="type" ng-model="owner.class" value="company" validate-on-change>
            <label for="company" translate>
                table_owners.company
            </label>
        </div>
        <input name="owners_name" ng-model="owner.name" type="text" placeholder="" class="form-control input-md">
        <input name="owners_percentage" ng-model="owner.percentage" type="number" placeholder="" class="form-control input-md">
      </div>`
    };

    return options;
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="account-form-client-de" ng-controller="ctrl">
  <pre>{{owners}}</pre>
  <new-owner ng-repeat="owner in owners track by $index" owner="owner"></new-owner>

  <button ng-click="addOwner()">add owner</button>
</div>

由于输入和单选按钮都引用 owner 对象中的属性，我看不出为什么输入绑定，单选按钮甚至不会被选中。

有什么想法吗？

Answer 1

这是因为当您多次使用相同的指令时，您会多次使用具有相同值的相同单选按钮。然后，HTML 解析器会感到困惑。我通过将每一行包装在 <form>（您不必提交）中来修复它，因此它再次有效。

angular.module('account-form-client-de', [])
  .controller('ctrl', function($scope) {
    $scope.owners = [];
    $scope.addOwner = function() {
      $scope.owners.push({
        class: 'person',
        name: 'new owner',
        percentage: 0
      });
    }

    // Add two owners to begin with
    $scope.addOwner();
    $scope.addOwner();
  })
  .directive("newOwner", function() {
    var options = {
      restrict: 'E',
      replace: true,
      scope: {
        owner: '=',
        remove: '&'
      },
      link: function(scope, element, attrs, controller, $parent) {

      },
      template: `
      <form class="table-owners item-row">
        <div class="checkbox">
          {{owner.class}}
          <input type="radio" name="person" value="person" ng-model="owner.class">
          <label for="person" translate>
              table_owners.person
          </label>
        </div>
        <div class="checkbox">
          <input type="radio" name="company" value="company" ng-model="owner.class">
          <label for="company" translate>
              table_owners.company
          </label>
        </div>
        <input name="owners_name" ng-model="owner.name" type="text" placeholder="" class="form-control input-md">
        <input name="owners_percentage" ng-model="owner.percentage" type="number" placeholder="" class="form-control input-md">
      </form>`
    };

    return options;
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="account-form-client-de" ng-controller="ctrl">
  <pre>{{owners}}</pre>
  <new-owner ng-repeat="owner in owners track by $index" owner="owner"></new-owner>

  <button ng-click="addOwner()">add owner</button>
</div>