1つ目の行に1つの要素をブートストラップする

Question

リストをループして、ブートストラップを使用して3行を作成する角度コードにしようとしています。私のコードは、1つの要素が常に最初の行に単独であることを除いて動作しています。それは次のようになります。

ここ

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

あなたは数を乗り切るチェックするために別の条件を適用する必要があり、この1

<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の係数がゼロであるため、1かではありません。

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>