ブートストラップ3グリッド

Question

動的にブランク試験のコントローラで塗りつぶし放置するスペースの数を設定します入力タイプ番号があります：

<md-input-container class="md-block"> 
    <label>Número de Espacios</label> 
    <input type="number" min="2" ng-model="options" /> 
</md-input-container> 

このアイデアは空白を埋めますコントローラは、このような何かを見ている：

-_______________________________________ B -___________________________________

C -_______________________________________ D -___________________________________

このグリッドを印刷する自動化された方法はありますか？

<div ng-show="!optionsBig"> 
     <div ng-repeat="opt in NumberOfOptions track by $index"> 
      <div class="row"> 
       <div class="col-md-2"> 
        <div class="question-line-row"> 
         <span>{{alphabet($index) + '-'}}</span> 
         <hr class="question-line" /> 
        </div> 
       </div> 
      </div> 
     </div> 
</div> 

をそして、これがレンダリングされているものです：：

が適切に私が達成しようとしているものを再現する方法はありますこれは私がコードの面で、これまで持っているものでしょうか？助けていただければ幸いです。

Answer 1

最初のことは、ng-repeat文が毎回新しいブートストラップ行を繰り返していることです。

<div ng-show="!optionsBig"> 
    <div class="row"> 
     <div class="col-md-2" ng-repeat="opt in NumberOfOptions track by $index"> 
      <div class="question-line-row"> 
       <span>{{alphabet($index) + '-'}}</span> 
       <hr class="question-line" /> 
      </div> 
     </div> 
    </div> 
</div> 

これは、各行ではなく各列を繰り返します。覚えておいて、ng-repeatは、マークされた要素とその子要素すべてを繰り返します。 行要素に多数の列がある場合、ブートストラップが誤動作し始めることにも注意してください。私はそれをしましたが、ますます追加すると予期しない結果が出ることがあります。