在ng-repeat期间添加引导行

Question

我有一个要在各个面板中显示的数据列表，使用Bootstrap的网格系统，我想利用宽屏幕水平显示几个面板，但在窄屏幕上要将它们堆叠在一起。我目前正在服务器端使用像这样的colClass，将列作为查询参数传入，通常设置为2或3，因此每个列要么是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来做这件事，但是我不知道如何在执行ng-repeat甚至ng-repeat-start="classData in contestData.classData“时，用class=row在div中包装适当数量的面板。

谢谢!

Answer 1

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

<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;
        };
    });

然后我使用过滤器(这里显示的jade)：.row(ng- contestData.classData =“row in rowfilter| rowfilter") ..col sm-6(ng-repeat=”row in row")

工作得很好，仍然让我满脑子都是Angular！