在 ng-repeat 期间添加引导行 [英] add bootstrap rows during ng-repeat

查看：21
本文介绍了在 ng-repeat 期间添加引导行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一种情况，我有一个要在各个面板中显示的数据列表，使用 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"><%=竞赛数据.classData[i].name%>

<div>...</div>

<% classCount++ %><% if ((classCount % columns) == 0) { %>

<%}%><%}%>

这是可行的，但是在服务器端进行这种级别的布局冒犯了我，我真的宁愿用 Angular 来做这件事，但我不知道如何用 class=row 将适当数量的面板包装在一个 div 中在做 ng-repeat 甚至 ng-repeat-start="classData in CompetitionData.classData"

谢谢！

解决方案

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

<div class="col-md-4" ng-repeat-start="数据中的项目">我是一行
<div class="clearfix" ng-if="($index+1)%3==0"></div><div ng-repeat-end=""></div>

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

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"

Thanks!

解决方案

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+1)%3==0"></div>
    <div ng-repeat-end=""></div>
</div>

这篇关于在 ng-repeat 期间添加引导行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆