Есть ли способ изменить класс col-md в зависимости от количества элементов в Angular?

Question

Я хочу автоматически настроить параметры начальной загрузки, что я подразумеваю под "Автонастройкой", чтобы динамически создавать сетку в зависимости от количества отображаемых элементов. Я получил следующий 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>

Я использую угловые директивы и 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 они должны поместиться в один ряд, если они <a> класс должен быть col-md-3, если они 2 элемента класса <a> должно быть col-md-6 и так далее.

Поскольку я использую AngularJS, есть ли способ сделать это угловым способом? Я хотел бы использовать его в нескольких представлениях, которые имеют разные Ctrls, поэтому, если это возможно, я бы оставил код СУХОЙ.

Answer 1

Проще говоря, используйте ng-класс и какой-нибудь метод, чтобы выяснить, какой класс использовать, основываясь на количестве элементов.

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