Search code examples
angularjsradio-buttonangularjs-ng-modelngmodel

AngularJS possible to click all radio buttons

I create a list of radio button selections, but the problem is that when clicked, they both remain selected, thus not working as a radio button group at all.

I have the same ng-model (a string; 'model') and ng-change for all of them, but the id is different.

 <div class="radio-button" 
         ng-show="vm.forAdmins" 
         ng-repeat="role in vm.adminRoleDefinitions">

        <input id="{{role.name}}" type="radio"
               ng-model="role.model"
               ng-change="vm.stateChanged(role.name, role.active)" >
         {{role.name}}
    </div>

enter image description here

Been wrestling with this for a while now, can't see what I've missed.

Solution

  • Radio button will work as a group if you assign name property to those radio buttons. I was also facing this issue then I realized my mistake.

    <div class="radio-button" ng-show="vm.forAdmins" ng-repeat="role in vm.adminRoleDefinitions">    
            <input id="{{role.name}}" type="radio"
                   ng-model="role.model"
                   ng-change="vm.stateChanged(role.name, role.active)"
                   name="roles" >
             {{role.name}}
</div>