2017-02-28 3 views
0

フォームをいくつかのラジオボタンで更新するページがあります。私はAPIを照会し、返されたオブジェクトの配列を使ってラジオボタンの現在の値を設定します。私が持っている問題は、ラジオボタンの最後のセットだけが実際に値を示しているということです。これは私が(私は角の開始と終了記号の[[]]を使用しています)持っているコードです:ネストされたng-repeatのいくつかのラジオボタングループが、最後のグループのみの値を表示します

<fieldset data-ng-repeat="s in sections"> 
    <div class="form-group"> 
     <div class="col-md-12"> 
      <h2>[[ s.section.name ]]</h2> 
     </div> 
    </div> 

    <!-- Field Item --> 
    <div class="form-group m-b-20 bg-light" data-ng-repeat="f in s.fields"> 
     <div class="col-md-12 m-b-30"> 
      <h4>[[ f.field.name ]]</h2> 
      <input type="text" data-ng-model="f.comments" class="form-control input-md underline" placeholder="Comments"> 
     </div> 

     <div class="col-sm-3"> 
      <input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="pass" class="form-control" data-ng-model="f.field_condition"> 
      <label class="eval-pass"><i class="fa fa-check-circle green"></i> Pass</label> 
     </div> 
     <div class="col-sm-3"> 
      <input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="fail" class="form-control" data-ng-model="f.field_condition"> 
      <label class="eval-fail"> <i class="fa fa-exclamation-circle red"></i> Fail</label> 
     </div> 
     <div class="col-sm-3"> 
      <input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="n/a" class="form-control" data-ng-model="f.field_condition"> 
      <label class="eval-na"> <i class="fa fa-circle blue"></i> N/A</label> 
     </div> 
     <div class="col-sm-3"> 
      <input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="caution" class="form-control" data-ng-model="f.field_condition"> 
      <label class="eval-caution"><i class="fa fa-exclamation-triangle yellow"></i> Caution</label> 
     </div> 
    </div> 
    [[ f.field_condition ]] 
    <hr> 
</fieldset> 

だから基本的に、私はいくつかのセクションがあり、各セクションには、いくつかのフィールドがあります。各フィールドには独自のラジオボタングループがあります(ラジオグループに名前を付けるには、セクションとフィールドIDを使用しています)。私が現在見ているのは、各セクションの最後のフィールドだけが実際に選択したラジオボタンを表示していることです。 ng-modelの値が間違いなくても、他のフィールドには選択がありません(値があることを確認するためにf.field_conditionの値を表示しています)。

フィールドごとに、モデルが設定されていることがわかります。私が手動で値を選択した場合、モデルが変更されていることがわかります。モデルが正しく設定されているようです。私はちょうどすべての行のために選ばれたものとして最初に表示されない理由を知りません。

ラジオボタンが選択されていない状態でもフォームを保存すると、データベースが正しく更新されます(値がnullに設定されず、選択した値を手動で変更すると更新されますdbでも同様)。

誰にもアイデアはありますか?ありがとう!フィドルに期待どおりに働いている、が、ここで

EDIT

は、このためのフィドルです。 http://jsfiddle.net/dq8r196v/367/

私はフィドルで使った静的なデータを使ってみましたが、私はまだ同じ問題があります。これはCSSの問題になるかどうかは誰にも分かりますか?ラジオボタンはスタイリングされていて、HTMLやCSSは書きませんでした。

UPDATE

私はまだこの問題を抱えていたので、私は新しい角度アプリを構築し、唯一私が作成したフィドルに含まれているコードを使用していました。私は同じコードがフィドルで動作するにもかかわらず、この新しいアプリで同じ問題を抱えています。私は実際に何が起こっているのか分かりませんが、誰かが光を当てることができれば、本当に感謝しています。

私は文字通り、新しい角型アプリケーションにコードをコピーして貼り付けましたが、各セクションのラジオボタンの最後のグループだけがアプリに値を表示しています。 https://pastebin.com/qSR33yfM

が、私は簡単にするために単一ページにアプリを作成しました:

は、ここで他の誰かがそれを試してみると、何が起こっている正確に何を見たい場合は、新しい角度のアプリのための私の完全なコードです。ここで

は、私は私のアプリで使用しています正確なJSONとペーストビンへのリンクです:https://pastebin.com/utfVVQfT

+0

コントローラ内のデータも見ることなくここまで伝えるのは難しいです。コントローラでこれらのfield_conditionsを静的に設定し、ページをロードし、ラジオボタンに適切なデフォルト選択ボタンがあるかどうかを確認してください。 – Scott

+0

あなたのproblemeステートメントでフィドルやプランナーを共有することができればうれしいです – MechanicalCoder

+0

私はフィドルを追加しましたが、そこではうまくいくようです。これはCSSの問題かもしれませんか? – Sehael

答えて

1

私は単純に異なる無線を表すオブジェクトの配列($scope.values)を追加することによって、あなたが抱えている問題を修正しましたボタンオプションを使用し、ng-repeatを使用してラジオボタンを作成します。https://pastebin.com/s3hNzaXX

私は新しい $scope Sを作成する周りのNG-繰り返しセマンティクスがある知っている、それは間違ってラジオボタンに結合していますあなたのネストされたNG-リピートを有するスコープでの競合があると想像

と:更新されたコードについては、以下を参照してください。あなたが望むものとは異なるスコープ(セクションレベルのng-repeat)で指定します。この疑いを確認するために

、あなたは別のポイントでの機能とはconsole.log sfを使用してfield_conditionはあなたが意図していなかったレベルに設定されていることを確認するためのコードであなたの補間のすべてを変換することができます。

どちらの場合でも、$scope.values配列のように、ラジオボタンをデータ(ng-repeatを使用)で作成することをお勧めします。これを行うための良い副作用は、異なるAJAXを介してデータを使用していても価値のあるオプションを使用することはできますが、上記の現在のコードでは奇妙な角度スコープの問題は発生しません。

+0

これは私が必要としていたものです。ありがとうございました! – Sehael

関連する問題