2016-05-05 26 views
0

AngularJS、Monaca、Onsen UIで開発されたクロスプラットフォームアプリがあります。複数のラジオボタンがAngularJSで選択されていません

ネストされたJSONオブジェクトを読み取り、上位レベルのアイテムが見出しであり、サブレベルのアイテムがラジオボタンであるリストにアイテムを表示します。

- りんご - OK - - ロットン - オレンジ - 熟していない - OK - ロットン

フルーツ 熟していません名前は上位レベルの見出し項目を表し、果物の状態はラジオボタンを表します。

私のリストは以下のように見えますが、問題はすべてのラジオボタンを選択できることです。リンゴ(私はラジオボタンであるのでできないはずです)と、例えば、オレンジ - それは、Applesから値を選択解除し、オレンジ値を選択します。リストが大きい場合は、果物からすべての値を選択することができます。キウイしかし、私が選択し、他の果物、キーウィからラジオボタンの選択を解除し始めます。私は= "saveValues(fruitDescription.description、option.fruitID)"をNGクリックし、実施削除した場合、私が期待するようなラジオボタンが働い

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> 

モデル。しかし、ラジオボタンごとに2つの値を送信する必要がありますので、ng-clickがより良い解決策になると思います。

ラジオボタンの機能を維持し、ng-clickを実装するにはどうすればよいですか?

+1

この問題では、plnkrをお勧めします。 –

+0

ng-valueを使用して、オブジェクトまたは配列をモデルの値として設定することができます –

+0

saveValues関数は何をしますか? –

答えて

1

ngModelを使用する場合でも、2つの値を送信できます。作業を参照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> 
関連する問題