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>

效果图：

注：此为个人笔记及总结，有误或有更好的解决方案请指正！谢谢