使用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/