带有Angular ng-repeat的bootstrap 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>

填充空白控制器的想法是看起来像这样：

A -_______________________________________ 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重复使用它标记的元素及其所有子元素。 还要注意，当行元素中有许多列时，引导程序会开始出现异常。我已经完成了，但是一旦你添加了越来越多的东西，你可能会开始看到意想不到的结果。