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

Question

Я хочу автонастройку бутстраповских COLS, что я имею в виду «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> 

Я м с помощью угловых директив и нг-повтора для генерации 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.

Answer 1

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

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

Update:

Для того, чтобы держать его сухим, вы можете также использовать пользовательские директивы, и вместо того, чтобы использовать нг-класс набор необходимых классов вручную. Что-то вроде этого:

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