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>