Handling Radio buttons with ng-repeat - AngularJS

43 Views Asked by At

I've been struggling with this for a few hours and don't know why I'm getting this behaviour.

I have a radio input that is being repeated using ng-repeat, when I click on one radio button and the click on another radio button they both stay selected.. I'm not using ng-repeat on the input rather a div wrapping the input

<div class="group-items">
    <div ng-repeat="item in ngDialogData.menu_modifier_groups[0].menu_modifier_items" class="modifier-item">
        <label for="<%item.menu_modifier_group.id + '_' + item.id%>" ng-click="modifierClicked(item)">
            <input id="<%item.menu_modifier_group.id + '_' + item.id%>"
                   class="radio-branded"
                   type="radio"
                   name="<%item.name%>"
                   ng-model="item.selected"
                   title="<%item.name%>"
                   value="<%item.id%>"
                   ng-class="{'not-available': !item.available, 'show-ie': false}">
            <span class="checkbox"></span>
            <span class="item-name">
                <span ng-bind="item.name"></span>
                <span ng-bind="priceDelta(modifier, item)"></span>
            </span>
        </label>
    </div>
</div>

Why are two radio buttons staying selected.. Any guidance appreciated

1

There are 1 best solutions below

0
Bojan Bedrač On BEST ANSWER

Radio buttons that are part of the same group should have the same name. You are assigning a name that comes from item.name. If that's different, the radio buttons will act as separate radio button groups.