javascript - AngularJS 中多个单选按钮未选择

Question

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

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

- 苹果 -- 未成熟 - 好的 -- 烂 - 橙子 -- 未成熟 - 好的 -- 烂

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

我的 View 中的列表如下所示 - 但问题是我可以选择所有单选按钮，例如苹果(我不应该这样做，因为它们是单选按钮)以及当我从例如中选择任何值时橙色 - 它从苹果中取消选择值并选择橙色值。如果列表更大，我可以选择水果中的所有值，例如猕猴桃，但当我选择和其他水果时，它开始取消选择猕猴桃的单选按钮。

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？

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>