多個單選按鈕未在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>