小编pvo*_*gel的帖子

在ng-repeat期间添加bootstrap行

我有一个情况,我有一个数据列表要在各个面板中显示,使用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>
    <% } %>
<% } %>
Run Code Online (Sandbox Code Playgroud)

这样做有效,但是在服务器端进行这种级别的布局会让我感到冒犯,我真的宁愿用Angular来做这件事,但是我无法弄清楚如何在div中使用class = row包装适当数量的面板-repeat甚至ng-repeat-start ="matchData.classData中的classData"

谢谢!

javascript twitter-bootstrap angularjs angularjs-ng-repeat

11
推荐指数
2
解决办法
2万
查看次数