有没有办法根据 Angular 中的元素数量更改 col-md class？

Question

我想自动调整 bootstrap 列，"Auto Adjust" 的意思是根据要显示的元素数量动态创建网格，我有以下 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 class，这意味着只有 3 个元素适合一行，我想要的是，无论有多少元素（它们总是在 2 和 5 之间），元素可以放在一行中，无论它们是 2 还是 5，它们都应该放在一行中，如果它们是 4 个元素，则 <a> class 应该是 col-md-3，如果它们是2个元素class <a>应该是col-md-6等等。

因为我正在使用 AngularJS，有没有办法按照 angular 的方式进行操作？我会在几个具有不同 Ctrl 的视图上使用它，所以如果可能的话我会保持代码干燥。

Answer 1

保持简单，使用 ng-class 和一些方法根据元素的数量找出要使用的 class。

<div ng-class="vm.getClass()" />

更新：

为了保持干燥，您还可以使用自定义指令，而不是使用 ng-class 手动设置所需的 classes。像这样：

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

有没有办法根据 Angular 中的元素数量更改 col-md class？

Is there a way to change the col-md class dependent on the number of elements in Angular?

javascript

css

grid-system

twitter-bootstrap

angularjs