在 ng-repeat 期间添加引导行

Posted 2023-03-06

【中文标题】在 ng-repeat 期间添加引导行

【英文标题】：add bootstrap rows during ng-repeat

【发布时间】：2014-05-02 08:11:59

【问题描述】：

我有一个数据列表要显示在各个面板中的情况，使用 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 来做，但我不知道如何用 class=row 将适当数量的面板包装在一个 div 中在做 ng-repeat 甚至 ng-repeat-start="classData in CompetitionData.classData"

谢谢！

【问题讨论】：

相关***.com/a/25838091/759452

【参考方案1】：

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

  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>

就是这样，它应该对你有用。

【参考方案2】：

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

<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>

【讨论】：

我现在要去测试一下，如果它像我期望的那样工作，我会给你一个赞成票。好吗？

@Jervelund 由于所有引导列都使用float:left css 属性浮动，因此 clearfix 是一个引导类，它将转到行的clear:both 侧以开始新行。因此，在每个循环中，将创建一列，在 3 列之后，插入一个分隔符以开始新行。

只需将列添加到行中，BS3 就会计算出堆叠。

不是最好的方法，但它有效。过滤器也可以。所以+1

它的解决方案很好，但它与 ng-messages 有问题。显示错误信息时控制上下移动。

【参考方案3】：

我有这个决定，似乎是为 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'];

【参考方案4】：

在这里回答我自己的问题，类似于 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="row in CompetitionData.classData | rowfilter") .col-sm-6(ng-repeat="column in row")

工作得非常好，我的头仍然围绕着 Angular！

【讨论】：

它优雅、漂亮、合乎逻辑、棱角分明。虽然我在角度上有这种奇怪的行为，但这个过滤器被递归调用，我得到了这个：错误：[$rootScope:infdig] 10 $digest() 达到了迭代。中止！

【参考方案5】：

如果您首先根据列数将数据分块成更小的部分，那么使用嵌套的ng-repeats 来创建您的布局会很容易：

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

  //https://***.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的全屏模式好像会干扰列宽样式，所以我把链接改成预览模式显示。