0

ブートストラップ列を自動調整したいのですが、「自動調整」とは、表示する要素の数に応じてグリッドを動的に作成することです。次の 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-43 つの要素のみが 1 行に収まることを意味するクラスがあります。私が望むのは、要素がいくつあっても (それらは常に 2 から 5 の間です)、要素が 1 行に収まることです。 、2 つまたは 5 つの場合は 1 つの行に収まる必要があり、4 つの要素の場合はクラス<a>、col-md-32 つの要素の場合はクラス、などです。<a>col-md-6

私はAngularJSを使用しているので、角度のある方法でそれを行う方法はありますか? 異なる Ctrl を持ついくつかのビューで使用するので、可能であればコードを DRY に保ちます。

4

1 に答える 1

1

シンプルに保ち、ng-class といくつかのメソッドを使用して、要素の数に基づいて使用するクラスを決定します。

<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>
于 2015-11-15T20:14:33.520 に答える