我想自动调整bootstrap cols,我的意思是"自动调整"是根据要显示的元素数量动态创建网格,我有以下html:
<div class="vertical-center">
<div class="dashboard-options row panel">
<div class="panel-heading">
Menu
</div>
<div class="panel-body">
<!-- The followig <a> element is generated automatically using angular ng-repeat
This is an Angular Directive in fact, so that it's used in all the dashboards,
There are a lot of dashboards, and each has different amount of options,
This <a> element is setup to take 4 columns of the row, but sometimes there are
More than 3 <a> elements so a new row is generated, thats what i don't want -->
<a href="somewhere" class="col-md-4">
<div class="dashboard-option button-effect text-center">
<i class="fa fa-something"></i>
<p>Some Text</p>
</div>
</a>
</div>
</div>
</div>
我使用angular指令和ng-repeat来生成html,这是指令:
<a href="somewhere" class="col-md-4">
<div class="dashboard-option button-effect text-center">
<i class="fa fa-something"></i>
<p>Some Text</p>
</div>
</a>
正如你所看到它有一个col-md-4
类,这意味着只有3个元素排成一排,我想要的是,无论有多少元素(它们总是在2到5之间) ),元素可以放在一行中,如果它们是2或5,它们应该放在一行中,如果它们是4个元素<a>
类应该是col-md-3
,如果它们是2个元素课程<a>
应为col-md-6
,依此类推。
当我使用AngularJS时,有没有办法以角度方式做到这一点?我会在几个具有不同Ctrls的视图上使用它,所以如果它可能我会保持代码DRY。
答案 0 :(得分:1)
保持简单,使用ng-class和一些方法根据元素的数量确定要使用的类。
<div ng-class="vm.getClass()" />
<强>更新强>
为了保持干燥,您还可以使用自定义指令,而不是使用ng-class手动设置所需的类。像这样:
(function() {
'use strict';
function bootstrapRow () {
var directive = {
link: link,
restrict: 'A',
scope : {
bootstrapRow : '='
}
};
return directive;
function link(scope, element, attrs) {
scope.$watch('bootstrapRow', function(noElements){
if(noElements){
//reset
element.removeClass('col-md-6');
element.removeClass('col-md-4');
element.removeClass('col-md-3');
element.removeClass('col-md-2');
console.log(noElements);
switch(parseInt(noElements)){
case 2:
element.addClass('col-md-6');break;
case 3:
element.addClass('col-md-4');break;
case 4:
element.addClass('col-md-3');break;
case 5:
element.addClass('col-md-2');break; // this probably needs some work
}
}
});
}
}
angular
.module('app')
.directive('bootstrapRow', bootstrapRow);
})();
你可以像这样使用它:
<div bootstrap-row="vm.rowCount"></div>