使用AngularJS定義Bootstrap列

Question

我想定義4種不同的輸出。 在我的HTML中，我想說我想顯示多少列，然后在JavaScript中，如果有4列，我將運行此代碼：

<div class="col-md-3">
    <h1>Content</h1>
</div>
<div class="col-md-3">
    <h1>Content</h1>
</div>
<div class="col-md-3">
    <h1>Content</h1>
</div>
<div class="col-md-3">
    <h1>Content</h1>
</div>

如果有3列，請運行以下代碼：

<div class="col-md-4">
    <h1>Content</h1>
</div>
<div class="col-md-4">
    <h1>Content</h1>
</div>
<div class="col-md-4">
    <h1>Content</h1>
</div>

如果有兩列，請運行此代碼：

<div class="col-md-6">
    <h1>Content</h1>
</div>
<div class="col-md-6">
    <h1>Content</h1>
</div>

如果有1列，請運行以下代碼：

<div class="col-md-12">
    <h1>Content</h1>
</div>

有沒有辦法用AngularJS做到這一點？

Answer 1

你可以嘗試一下：

NG：

$scope.number = 4;//your column count 
$scope.getNumber = function(num) {
    return new Array(num);   
}

HTML：

<div ng-repeat="i in getNumber(number) track by $index" class="col-sm-{{12/number}}">
     <h1>Content</h1>
</div>

http://jsfiddle.net/3ck8vb1s/1/