Question

我有一种情况，我有一个数据列表要在各个面板中显示，使用Bootstrap的网格系统，我想利用宽屏幕并水平显示几个面板，但在狭窄的屏幕上有它们堆叠。我目前正在服务器端放置这样的ejs，将列作为查询参数传入，通常设置为2或3，因此每个colClass都是col-sm-6或col-sm-4。

<% var colWidth = 12/columns; var colClass = "col-sm-" + colWidth; %>
<% for(var i=0; i<contestData.classData.length; i++) {%>
    <% if ((classCount % columns) == 0) { %>
        <div class="row">
    <% } %>
    <div class="<%= colClass %>">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title"> <%= contestData.classData[i].name %> </h3>
            </div>
            <div>...</div>
        </div>
    </div>
    <% classCount++ %>
    <% if ((classCount % columns) == 0) { %>
        </div>
    <% } %>
<% } %>

这样可行，但是在服务器端进行这种级别的布局会让我感到冒犯，我真的宁愿用Angular来做这件事，但我无法弄清楚如何用div = row包装适当数量的面板在执行ng-repeat或甚至ng-repeat-start =“classData in conteData.classData”

时

谢谢！

Answer 1

这是一个简单的解决方案，只有HTML，3 ROWS

<div class="row" >
    <div class="col-md-4" ng-repeat-start="item in data">
        I'M A ROW
    </div>
    <div class="clearfix" ng-if="($index+1)%3==0"></div>
    <div ng-repeat-end=""></div>
</div>

Answer 2

如果您首先根据列数将数据分块为较小的部分，则可以很容易地使用嵌套的ng-repeat来创建布局：

$scope.getRows = function(array, columns) {
  var rows = [];

  //https://stackoverflow.com/questions/8495687/split-array-into-chunks
  var i,j,temparray, chunk = columns;
  for (i=0,j=array.length; i<j; i+=chunk) {
      temparray = array.slice(i, i+chunk);

      rows.push(temparray);
  }

  return rows;
};

$scope.rows = $scope.getRows($scope.contestData, $scope.columns);

然后你的标记就是：

<div ng-repeat="row in rows">
  <div class="row">
    <div ng-class="{'col-xs-4': columns == 3, 'col-xs-3': columns == 4}" ng-repeat="contest in row">
      <div class="panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">{{contest}}</div>
          </div>
      </div>
    </div>
  </div>
</div>

请注意ng-class正在根据列数决定要添加哪种类型的类。这个例子是交付3和4，但你可以扩展它来处理其他人。

以下是工作演示：http://plnkr.co/edit/B3VAXlq9dkzO3hQkbkN3?p=preview

<强>更新
Plunker的全屏模式似乎会干扰列宽样式，因此我将链接更改为以预览模式显示。

Answer 3

在这里回答我自己的问题，类似于j.wittwer的答案，我创建了一个过滤器来按行排列我的数据等：

angular.module('myApp.filters').
    filter('rowfilter', function () {
        return function (data, columnCount) {
            var rows = [];
        var colCount = columnCount || 2;
        var columns = [];
        for (var i = 0; i< data.length; i++) {
        columns.push(data[i]);
        if (columns.length == colCount) {
        rows.push(columns);
        columns = [];
        }
        }
        if (columns.length > 0) {
        rows.push(columns);
        }
        return rows;
        };
    });

然后我使用过滤器（这里显示的是玉）： .row（ng-repeat =“matchData.classData | rowfilter中的行”） .col-sm-6（ng-repeat =“行中的列”）

工作非常好，仍然围绕着Angular！

Answer 4

我有这个决定，似乎正在为3 col

工作

<div ng-repeat="r in data">
    <div class="row" ng-if="$index%3==0">
        <div class="col-md-4" ng-if="$index<data.length">
        {{data[$index]}}
        rrr
        </div>
        <div class="col-md-4" ng-if="$index+1<data.length">
        {{data[$index+1]}}
        rrr
        </div>
        <div class="col-md-4" ng-if="$index+2<data.length">
        {{data[$index+2]}}
        rrr
        </div>
    </div>
</div>

和数据

$scope.data = ['1','2','3','4','5','6','7'];

Answer 5

你可以添加这样的东西，首先在你的控制器中，做一个函数，爸爸得到一个整数“断点”，它是你想要一行包裹的列数，以及你想要在每列中包含的数据，如下所示：

  function getRows(breakpoint,data) {
        var len = data.length; var i = 0;
        var rows = []; var temp = [];
        for (; i < len; i++) {
            if (i % breakpoint == 0 && i != 0) {
                rows.push(temp);               
                temp = [];
            } 
            temp.push(data[i]);
        }
        var len2 = rows.length * breakpoint;
        if (len > len2) {
            //var leftOvers = len - len2;
            i = len2; temp = [];
            for (; i < len; i++) {
                temp.push(data[i]);
            }
            rows.push(temp);
        }

        return rows;
    }

然后，只要你回复数据，你就可以：

 $scope.rows = getRows(3,data); // in case you want 3 cols.

然后在你的HTML中：

    <div class="row"  ng-repeat="row in rows">
     <div class="col-lg-4" ng-repeat="data in row">
       {{data.whatever}}
     </div>
</div>
     </div>

就是这样，它应该适用于你。

在ng-repeat期间添加bootstrap行

5 个答案: