Question

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

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

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

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

我的视图中的列表如下所示 - 但问题是我可以选择所有单选按钮，例如苹果（我不应该这样做，因为它们是单选按钮），当我选择任何值时，例如橘子 - 它取消选择苹果中的值并选择橙色值。如果列表较大，我可以从水果中选择所有值，例如新西兰，但当我选择和其他水果，它开始取消选择新西兰的单选按钮。

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 =＆＃34; saveValues（fruitDescription.description，option.fruitID）＆＃34; 并实施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>

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

1 个答案: