AngularJS中没有选择多个单选按钮答案

【问题标题】：Multiple radio buttons not selecting in AngularJSAngularJS中没有选择多个单选按钮
【发布时间】：2016-05-06 05:21:13
【问题描述】：

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

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

- 苹果 -- 不成熟 - 好的 -- 烂 - 橙子 -- 不成熟 - 好的 -- 烂了

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

在我看来，我的列表如下所示 - 但问题是我可以选择所有单选按钮，例如苹果（我不应该这样做，因为它们是单选按钮）以及当我从例如Oranges - 它从 Apples 中取消选择一个值并选择 Orange 值。如果列表较大，我可以从水果中选择所有值，例如猕猴桃，但是当我选择其他水果时，它开始从猕猴桃中取消选择单选按钮。

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-模型。但我需要为每个单选按钮发送 2 个值，因此认为 ng-click 会是更好的解决方案。

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

【问题讨论】：

我强烈推荐这个问题的 plnkr。
可以使用 ng-value 将对象或数组设置为模型的值
你的 saveValues 函数是做什么的？
@AlexChance saveValues() 函数保存所选水果的 ID 以及我希望稍后用于创建 JSON 对象以发送到我的数据库的所选水果单选按钮 ID。跨度>

标签： javascript jquery angularjs

【解决方案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>

【讨论】：