Radio buttons inside directive in a ng-repeat not working in AngularJS

Question

I have a set of radio buttons inside a directive. The directive has an ng-repeat, so it exists multiple times.

I'm able to populate the input fields of the directive, but the radio buttons won't react.

 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>

Since both the inputs and radio buttons refer to a property in the owner object, I fail to see why the inputs bind, and the radio buttons won't even become checked.

Any ideas?

Answer 1

It's because when you have the same directive multiple times, you have the same radio buttons with the same values multiple times. Then, the HTML parser gets confused. I fixed it by wrapping each row in a <form> (which you don't have to submit), so it's valid again.

 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>