在ng-repeat期间添加引导行
add bootstrap rows during ng-repeat
我有一个情况,我有一个数据列表显示在单独的面板,使用Bootstrap的网格系统,我想利用宽屏幕和显示几个面板水平,但在狭窄的屏幕上有它们堆叠。我目前正在使用这样的ejb在服务器端布局,将列作为查询参数传递进来,通常设置为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这样做,但我不知道如何在div中包装适当数量的面板class=row,而做ng-repeat或甚至ng-repeat-start="classData in contestData.classData"
谢谢!
这里有一个简单的解决方案,只有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>
如果根据列数将数据分成更小的部分,那么使用嵌套的ng-repeat
s来创建布局将很容易:
$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);
那么你的标记就是:
<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的全屏模式似乎干扰了列宽度样式,所以我改变了链接,以预览模式显示
在这里回答我自己的问题,类似于j.w 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="在contestData中的行")classData | rowfilter").col-sm-6(ng-repeat="column in row")
工作得很好,仍然让我对Angular感到困惑!
我有这个决定,似乎是为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'];
你可以添加这样的东西,首先在你的控制器中,做一个函数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>
就是这样,它应该对u有效
- AngularJS:为ng-repeat中的图像添加切换功能
- Ng-Repeat在末尾添加新项目
- 将jquery函数添加到Angular ng repeat中
- 如何使用ng repeat在匹配的元素上添加活动类
- 使用ng repeat添加多个视图实例时的范围界定问题
- 如何在AngularJS中将css类添加到transcluded ng repeat内容中
- 使用括号表示法添加到关联数组时,ng-repeat 不会更新
- 当列数为 4 时,我如何务实地让 ng-repeat 添加另一行
- AngularJs:我想从数组或列表中添加一个类,用于ng-repeat中的每次迭代
- 在 ng-repeat 中添加和删除 JSON 列表
- 添加重复键对象时如何更新 ng-repeat 列表中的元素
- Angular JS - 将ng-repeat异步应用于添加到DOM的内容
- 当项目包含在数组中时,在 ng-repeat 上以角度添加类
- 如何为由 ng-repeat 迭代的每个名称和值添加单独的宽度
- 向 Angular ng-repeat(角度)添加一个计数器
- 在页面加载时,根据 json 对象的值向 Angularjs ng-repeat 中的元素添加一个类
- AngularJS试图将一个类添加到多个值,如果它在ng-repeat上为真
- AngularJS在ng repeat中的新项上添加CSS类
- 如何在ng repeat中添加Class
- 如何在angularjs中添加ng-repeat中的值