NG-重复过程中添加的自举行 [英] add bootstrap rows during ng-repeat

问题描述

我有一个情况我有数据的列表显示在个别面板，通过引导的网格系统，我想利用宽屏幕和横向显示多个面板，但在狭窄的屏幕让他们堆叠。我目前铺设事情了与这样EJS服务器端，与所传递的列作为查询参数，典型地设置为2或3，所以每colClass要么是COL-SM-6或COL-SM-4。

I have a situation where I have a list of data to be displayed in individual panels, Using Bootstrap's grid system, I'd like to take advantage of a wide screen and display several panels horizontally, but on narrow screens have them stack. I'm currently laying things out on the server side with ejs like this, with columns being passed in as a query parameter, typically set to 2 or 3, so each colClass is either col-sm-6 or 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>
    <% } %>
<% } %>

这工作，但在服务器端做这个水平布局冒犯了我，我真的宁愿做这与角度，但我无法弄清楚如何包装与类=行的div板的适当数量同时做NG-重复，甚至NG-重复启动=classData在contestData.classData

This works, but doing this level of layout on the server side offends me, I'd really rather do this with Angular but I can't figure out how to wrap the appropriate number of panels in a div with class=row while doing ng-repeat or even ng-repeat-start="classData in contestData.classData"

谢谢！

推荐答案

下面一个简单的解决方案，与刚HTML，3行

Here a simple solution with just 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%3==2"></div>
    <div ng-repeat-end=""></div>
</div>

这篇关于NG-重复过程中添加的自举行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！