[英]Define Bootstrap columns with AngularJS
I would like to define 4 different outputs. 我想定义4种不同的输出。 In my HTML I want to say how many columns I would like to show, then in JavaScript I would run this code if there are 4 columns:
在我的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>
Run this code if there are 3 columns: 如果有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>
Run this code if there 2 columns: 如果有两列,请运行此代码:
<div class="col-md-6">
<h1>Content</h1>
</div>
<div class="col-md-6">
<h1>Content</h1>
</div>
Run this code if there is 1 column: 如果有1列,请运行以下代码:
<div class="col-md-12">
<h1>Content</h1>
</div>
Is there a way doing this with AngularJS? 有没有办法用AngularJS做到这一点?
Can you try this: 你可以尝试一下:
NG: NG:
$scope.number = 4;//your column count
$scope.getNumber = function(num) {
return new Array(num);
}
Html: 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/ http://jsfiddle.net/3ck8vb1s/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.