twitter-bootstrap 在 ng-repeat 期间添加引导行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22618414/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
add bootstrap rows during ng-repeat
提问by pvogel
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.
我有一种情况，我有一个要在各个面板中显示的数据列表，使用 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>
<% } %>
<% } %>
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"
这是有效的，但是在服务器端进行这种级别的布局冒犯了我，我真的宁愿用 Angular 来做这件事，但我不知道如何在执行 ng 时使用 class=row 将适当数量的面板包装在一个 div 中-repeat 甚至 ng-repeat-start="classData in CompetitionData.classData"
Thanks!
谢谢！
回答by Oswaldo Alvarez
Here a simple solution with just HTML, 3 ROWS
这里有一个简单的解决方案，只有 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>
回答by j.wittwer
If you start by chunking your data into smaller parts, based on the number of columns, it will be easy to use nested ng-repeats to create your layout:
如果您首先根据列数将数据分成更小的部分，那么使用嵌套ng-repeats 来创建布局将很容易：
$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);
Then your markup is simply:
那么你的标记很简单：
<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>
Notice that ng-classis doing the work of deciding which type of class to add based on the number of columns. This example is handing 3 and 4, but you could extend it to handle others.
请注意，这ng-class是根据列数决定添加哪种类型的类的工作。这个例子是处理 3 和 4，但你可以扩展它来处理其他的。
Here is a working demo: http://plnkr.co/edit/B3VAXlq9dkzO3hQkbkN3?p=preview
这是一个工作演示：http: //plnkr.co/edit/B3VAXlq9dkzO3hQkbkN3?p=preview
Update:
Plunker's full screen mode seems to interfere with the column width style, so I changed the link to display in preview mode.
更新：
Plunker 的全屏模式似乎干扰了列宽样式，所以我将链接更改为在预览模式下显示。
回答by pvogel
Answering my own question here, similar to the answer from j.wittwer, I created a filter to chunk my data appropriately by row, etc.:
在这里回答我自己的问题，类似于 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;
};
});
And then I use the filter (jade shown here): .row(ng-repeat="row in contestData.classData | rowfilter") .col-sm-6(ng-repeat="column in row")
然后我使用过滤器（这里显示的是玉）： .row(ng-repeat="row in CompetitionData.classData | rowfilter") .col-sm-6(ng-repeat="column in row")
Works very nicely, still wrapping my head around Angular!
工作得很好，仍然让我的头围绕着 Angular！
回答by Andrii Hidden
I have this decision, seems to be working for 3 col
我有这个决定，似乎适用于 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>
and data is
和数据是
$scope.data = ['1','2','3','4','5','6','7'];
回答by Cristóbal Flores I?iguez
You can add something like this, first in your controller, do a function dad gets an integer "breakpoint" that is the number of columns you want to wrapped by a row, and the data you want inside each column like so:
你可以添加这样的东西，首先在你的控制器中，做一个函数爸爸得到一个整数“断点”，它是你想要由一行包裹的列数，以及你想要在每列中的数据，如下所示：
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;
}
then whenever you recive the data yo simply do:
然后每当您收到数据时，只需执行以下操作：
$scope.rows = getRows(3,data); // in case you want 3 cols.
then in your html:
然后在你的 html 中：
<div class="row" ng-repeat="row in rows">
<div class="col-lg-4" ng-repeat="data in row">
{{data.whatever}}
</div>
</div>
</div>
and that`s it, it should work for u.
就是这样，它应该适合你。
