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>