Multiple radio buttons not selecting in AngularJS

Question

I have a cross platform app developed in AngularJS, Monaca and Onsen UI.

I read a nested JSON object and display the items in a list where the high level items are the headings and the sub-level items are radio buttons e.g.

- Apples -- Not ripe -- OK -- Rotten - Oranges -- Not ripe -- OK -- Rotten

Where the fruit names represent the high level heading items and the states of the fruit represent the radio buttons.

My list in my view looks as below - but the issue is that I can select all radio buttons for e.g. Apples (which I shouldn't be able to do as they are radio buttons) and when I select any value from e.g. Oranges - it deselects a value from the Apples and selects the Orange value. If the list is larger I can select all values from a fruit e.g. Kiwi but when I select and other fruits, it starts deselecting the radio buttons from Kiwi.

fruit.html

<li class="list__item" ng-repeat="fruitDescription in data">
    <span class="list__item__line-height"><strong>{{fruitDescription.description}}</strong></span>
    <label class="radio-button" ng-repeat="option in fruitDescription.options">
        <input type="radio" name="option_question_{{option.fruitID}}" ng-click="saveValues(fruitDescription.description, option.fruitID)">
        <div class="radio-button__checkmark"></div>
            Fruit Description: {{fruitDescription.description}} + Fruit ID: {{option.fruitID}}
    </label>
</li>

The radio buttons worked as I would expect if I remove the ng-click="saveValues(fruitDescription.description, option.fruitID)" and implement a ng-model. But I need to send 2 values per radio buttons so figured ng-click would be the better solution.

How do I keep the functionality of the radio buttons as well as implementing the ng-click?

You can use ng-value to set an object or array as value of model — Joao Polo
– Joao Polo, Commented May 5, 2016 at 21:06
@AlexChance The saveValues() function saves the ID's of the selected fruit as well as that fruits selected radio button id which I want to use later to create a JSON object for sending to my Database. — heyred
– heyred, Commented May 5, 2016 at 21:23

Kyle · Accepted Answer · 2016-05-05 21:21:13Z

1

You can still send two values if you use ngModel. See working Plunker: http://plnkr.co/edit/5V2DozELrz25BSHuRHVT?p=preview

Just set the model to a fruit.state. Then when you're ready to interact with the API, send the whole fruit[0] object.

<div ng-repeat="fruit in fruits">
  <strong>{{fruit.name}}</strong>
  <br />
  <label ng-repeat="state in fruitStates">
    <input type="radio" ng-model="fruit.state" name="{{fruit.name + 'stateSelect'}}" value="{{state}}">{{state}}</input>
  </label>
  <hr />
</div>

answered May 5, 2016 at 21:21

Kyle

5,6077 gold badges38 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Multiple radio buttons not selecting in AngularJS

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related