Question

我正在尝试使用Bootstrap循环遍历列表并创建三行的Angular代码。我的代码工作正常，但第一行中一个元素总是独立的。它看起来像这样：

UserId=105

这是我的代码：

我想让这些行最终结束：

<div ng-repeat="n in [1, 2, 3, 4, 5, 6, 7, 8 , 9, 10]" ng-class="{'row': 
$index % 3 == 0}">
    <div class="col-xs-3">
        {{n}}
    </div>
</div>

Answer 1

你会想要这样的东西

<div ng-repeat="n in array" ng-if="$index % 3 == 0" class="row">
    <div class="col-sm-4">{{array[$index]}}</div>
    <div class="col-sm-4" ng-if="array.length > ($index + 1)">{{array[$index + 1]}}</div>
    <div class="col-sm-4" ng-if="array.length > ($index + 2)">{{array[$index + 2]}}</div>
</div>

Answer 2

使用$ index + 1而不是$ index

  <div ng-repeat="n in [1, 2, 3, 4, 5, 6, 7, 8 , 9, 10]" ng-class="{'row':
   (($index+1) % 3) == 0}">
          <div class="col-xs-3">
             {{n}}
          </div>
   </div>

Answer 3

然后，您可以轻松地将ng-class带到下方的一个深度，然后根据需要应用col-sm-12或col-sm-3。

<div class="row">
    <div ng-repeat="n in [1, 2, 3, 4, 5, 6, 7, 8 , 9, 10]" 
       ng-class="{'col-sm-12': $first, 'col-sm-3': !$first}">
        {{n}}
    </div>
</div>

Answer 4

试试这个

<div ng-repeat="n in [1, 2, 3, 4, 5, 6, 7, 8 , 9, 10]" ng-class="{'row': 
$index % 3 == 0 && $index!=1}">
    <div class="col-xs-3">
        {{n}}
    </div>
</div>

您需要应用另一个条件来检查天气数是否为1，因为1/3的模数也为零。

引导第一行中的一个元素

4 个答案: