My form is structured like the following:
<form class="content">
<div class="inner-content" ng-repeat="item in items">
<span class="inner-content-name">{{item.name}}</span>
<input
class="inner-content-toggle"
ng-class="{{item.className}}"
type="radio"
ng-click="toggle(item.id, item.name)"
ng-checked={{item.checked}}
/>
</div>
</form>
My question is more of why this does not work... When I click on one of the radio buttons in the rendered UI it adds the inner dot, however the inner dot when clicked again does not go away and stays permanently. As well if I select another radio button while one is already clicked both are now clicked and both will not unclick. This behavior is very much like a checkbox, but I want only one to be clicked ever. Any suggestions?
You must set the name attribute with the same value for the radio elements if they are mutually exclusive.
For example try this:
javascript:
this.items = [
{
name: 'foo',
nameAttr: 'radio-option1',
className: 'foo-bar',
checked: 1
},
{
name: 'bar',
nameAttr: 'radio-option1',
className: 'foo-bar',
checked: 0
}
];
html:
<form class="content">
<div class="inner-content" ng-repeat="item in $ctrl.items">
<span class="inner-content-name">{{item.name}}</span>
<input
class="inner-content-toggle"
name="{{item.nameAttr}}"
ng-class="{{item.className}}"
type="radio"
ng-click="$ctrl.toggle(item)"
ng-checked="item.checked"
/>
</div>
</form>
Playground: https://stackblitz.com/edit/angularjs-qhcken?file=home/home.controller.js