多个单选按钮未在AngularJS中选择

Question

我有一个使用AngularJS，Monaca和Onsen UI开发的跨平台应用程序。

我读取了一个嵌套的JSON对象，并将其显示在列表中，其中高级项是标题，子级项是单选按钮，例如

-苹果 -不成熟-好-烂 -橘子 -不成熟-好-烂

水果名称代表高级标题，水果的状态代表单选按钮。

我认为我的列表如下所示-但问题是我可以为Apple选择所有单选按钮（因为它们是单选按钮，所以我不能这么做），而当我从Oranges中选择任何值时-从苹果中取消选择一个值，然后选择橙色值。 如果列表较大，我可以从水果（例如猕猴桃）中选择所有值，但是当我选择其他水果时，它将开始从猕猴桃中取消选择单选按钮。

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>

如果删除ng-click =“ saveValues（fruitDescription.description，option.fruitID）”并实现ng-model，则单选按钮可以正常工作。 但是我需要为每个单选按钮发送2个值，所以用ng-click会更好。

如何保持单选按钮的功能以及实现ng-click？

Answer 1

如果使用ngModel仍然可以发送两个值。 查看工作的Plunker： http ://plnkr.co/edit/5V2DozELrz25BSHuRHVT?p=preview

只需将模型设置为fruit.state 。 然后，当您准备与API进行交互时，发送整个fruit[0]对象。

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