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 eg

- 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 eg Apples (which I shouldn't be able to do as they are radio buttons) and when I select any value from eg 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 eg 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?

Answer 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>