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>

如果有2列，则运行此代码：

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

使用AngularJS定义Bootstrap列

1 个答案: