有没有一种方法可以根据Angular中元素的数量来更改col-md类
Is there a way to change the col-md class dependent on the number of elements in Angular?
我想自动调整引导列,我所说的"自动调整"是指根据要显示的元素数量动态创建网格,我得到了以下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时,有没有一种方法可以以角度的方式进行?我会在几个具有不同Ctrl的视图中使用它,所以如果可能的话,我会保留代码DRY。
保持简单,使用ng类和一些方法根据元素的数量来确定要使用什么类。
<div ng-class="vm.getClass()" />
更新:
为了保持干燥,您还可以使用自定义指令,而不是使用ng类手动设置所需的类。类似这样的东西:
(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>
相关文章:
- CKEditor Widget-阻止编辑可编辑元素本身
- 如何设置html元素填充的动画
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 使用clickToggle并在单击另一个元素时关闭元素
- 单击时将焦点更改为元素
- 表追加而不附加最后一个元素
- 如何在jQuery中获取元素的形式
- 我可以获得相对于被点击元素的确切点击位置吗
- 在函数中添加数组元素的数值
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 如何使Boostrap上col内的元素比col宽
- 我可以在一个col-md-8中使用两个col-md-6吗
- Bootstrap3 col-md-4 和 col-lg-4 在 IE8 上不起作用
- 角度材质 md 菜单元素如果在具有 z 索引的固定元素上单击外部,则不会关闭
- 有没有一种方法可以根据Angular中元素的数量来更改col-md类
- 类= & # 39;col-md-12& # 39;在firefox中不能正常工作,但在chrome中工作
- 如何在包含col元素的主体中选择tr
- 角材质-元素叠加在图像上(在md-card中)
- 如何设置md每日元素的高度,而不使用jquery或javascript