ng-class實現模塊自由添加後的自適應

在項目中遇到這樣的情況，在一個大管理模塊下，有多個小模塊，而這些小模塊可以自由添加和刪除，故需要模塊內容自適應，通過ng-class實現該效果，如有遇到類似情況的，希望可以給大家參考；

要求：每行最多3個模塊，均居中顯示；

思路：模塊數量可以分爲X%3=0，X%3=1，X%3=2三種情況；

佔1/3的情況的爲X%3=0或者X%3=1且不是最後一個元素，亦或者X%3=2且序號小於模塊總數-2；

佔1/2的情況爲X%3=2且序號爲最後一個或者最後第二個；

佔1的情況爲X%3=1且序號爲最後一個；再增加一個右邊框(序號不是最後一個且序號+1對3取餘不等於0)

html代碼：

<div class="col-xs-6 no-left-padding">
    <div class="elecBg overflow">
        <div class="text-font18 version-padding30 marginB20">
            管理
        </div>
        <div class="full-width">
            <div class="marginB25 pull-relative" 
                 ng-class="{'col-xs-4':demandInfo.length%3==0 || (demandInfo.length%3==1 && $index!=demandInfo.length-1) || (demandInfo.length%3==2 && $index<demandInfo.length-2),
                            'col-xs-12':demandInfo.length%3==1 && $index==demandInfo.length-1,
                            'col-xs-6':demandInfo.length%3==2 && ($index==demandInfo.length-1 || $index==demandInfo.length-2),
                            'home-right-border':$index!=demandInfo.length-1 && ($index+1)%3!=0}" ng-repeat="info in demandInfo track by $index">
                <div class="paddingT20" ng-class="{'home-common-text':info.count!=0,'home-common-textNoHover':info.count==0}" ng-click="demandClick($index, info)">
                    <div class="marginB5 text-center">{{info.title}}</div>
                    <div class="text-font35 text-center" ng-class="{'home-yellow':$index==0 && info.count!='','home-blue':$index!=0 && info.count!='','demand-color':info.count==''}">{{info.count}}</div>
                </div>
            </div>
        </div>
    </div>
</div>

效果圖：

注：此爲個人筆記及總結，有誤或有更好的解決方案請指正！謝謝