2016-08-15 4 views
0

私は以下のようなhtmlのブロックを持っていると言います。オブジェクトの配列をループし、各オプションのラベルを表示する必要があります。dom要素を持たない角膜ループ

これはラベルと入力に対して個別にng-repeatを使用して簡単に行うことができますが、私のスタイルフレームワークがチェックインされた入力を正しく更新するためには、入力をドキュメントのラベルの真上に置く必要があります。

input + labelの各グループを別のdom要素にラップしないでこれを行うにはどうすればよいですか?

 <input type="radio" name="rGroup" value="1" id="r1" /> 
     <label class="radio radio-plan-lg" for="r1"> 
      Billed every<br><span>1 month</span> 
     </label> 

     <input type="radio" name="rGroup" value="2" id="r2" /> 
     <label class="radio radio-plan-lg" for="r2"> 
      Billed every<br><span>3 months</span> 
     </label> 

     <input type="radio" name="rGroup" value="3" id="r3" /> 
     <label class="radio radio-plan-lg" for="r3"> 
      Billed every<br><span>6 months</span> 
     </label> 

ない:

 <input type="radio" name="rGroup" value="1" id="r1" /> 
     <input type="radio" name="rGroup" value="2" id="r2" /> 
     <input type="radio" name="rGroup" value="3" id="r3" /> 

     <label class="radio radio-plan-lg" for="r1"> 
      Billed every<br><span>1 month</span> 
     </label> 
     <label class="radio radio-plan-lg" for="r2"> 
      Billed every<br><span>3 months</span> 
     </label> 
     <label class="radio radio-plan-lg" for="r3"> 
      Billed every<br><span>6 months</span> 
     </label> 

答えて

2

使用ng-repeat-start

<input ng-repeat-start="item in array" type="radio" name="rGroup" value="{{item}}" id="r{{item}}" /> 
<label ng-repeat-end class="radio radio-plan-lg" for="r{{item}}"> 
    Billed every<br><span>{{item}} month</span> 
</label> 

See Documentation - Special repeat start and end points

必要性を(これは、同様に、リストのスタイルを破壊してしまうであろう)