引導第一行中的一個元素

Question

我正在嘗試使用Bootstrap循環訪問列表並創建三行的Angular代碼。我的代碼正在工作，除了第一行中的一個元素總是單獨使用。它看起來像這樣：

1 
2 3 4 
5 6 7 
8 9 10 

這裏是我的代碼：

<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> 

我試圖讓行落得這樣的：

1 2 3 
4 5 6 
7 8 9 
10 

Answer 1

使用$指數+ 1，而不是$指數

<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 2

然後，你可以輕鬆拍攝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 3

試試這個

<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/3模數也爲零。

Answer 4

你想這樣的事情

<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>