有沒有辦法根據Angular中元素的數量來改變col-md類？

Question

我要自動調整引導的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> 

我採用了棱角分明的指令和NG-重複生成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的幾個視圖上使用它，所以如果可能的話我會保持代碼乾燥。

Answer 1

保持簡單，使用ng-class和一些方法根據元素的數量找出要使用的類。

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

更新：

爲了保持乾燥，你也可以使用自定義指令和，而不是使用納克級手動所需的類設置。事情是這樣的：

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