9

ディレクティブを使用してwithbootstrapのクラスで行divを動的に作成する方法を理解しようとしています。row-fluidangular.jsng-repeat

これが角度です：

 <div ng-repeat="task in tasks" class="row-fluid">
     <div class="span6 well">{{task.name}}</div>
 </div>

ただし、これは機能しません。bootstrap生成したいhtmlは次のとおりです。

http://jsfiddle.net/YKkXA/2/

基本的に、ng-repeat内でインデックスのmod 2を実行する必要があり、0の場合は、を閉じて</div>新しいを作成します<div class="row-fluid">。これはどのように可能ですか？

4

3 に答える 3

14

ngRepeatアイデアは、アイテムをグループ化するためにアイテムをフィルター処理し、サブアイテムを反復する時間を作ることです。

まず、そのフィルターをモジュールに追加します。

module.filter('groupBy', function() {
    return function(items, groupedBy) {
        if (items) {
            var finalItems = [],
                thisGroup;
            for (var i = 0; i < items.length; i++) {
                if (!thisGroup) {
                    thisGroup = [];
                }
                thisGroup.push(items[i]);
                if (((i+1) % groupedBy) === 0) {
                    finalItems.push(thisGroup);
                    thisGroup = null;
                }
            }
            if (thisGroup) {
                finalItems.push(thisGroup);
            }
            return finalItems;
        }
    };
});

コントローラーで (テンプレートで直接フィルタリングすると、$digest ループが発生するため):

function TaskCtrl() {
    $scope.tasksGroupBy2 = $filter('groupBy')(taskGroup, 2);
}

そしてあなたの.html：

<div ng-repeat="taskGroup in tasksGroupBy2" class="row-fluid">
    <div ng-repeat="task in taskGroup" class="span6 well">{{task.name}}</div>
</div>
于 2013-03-19T10:56:13.973 に答える
0

トピック外: ブートストラップを使用すると、class="span6 well" の div を 1 つの bigass 行に配置するだけでうまくスタックできます。（レスポンシブレイアウトも得られます）。ブートストラップが処理できない動作の単なる例であった場合は申し訳ありません。Anthony と Remigio は正しいです。ng-repeat タグに埋め込まれた div を生成する追加のモジュール ビークルを作成する必要があります。

于 2013-04-18T09:43:08.900 に答える