如何使用bootstrap拆分具有三列的ng重复数据
如何使用bootstrap拆分具有三列的ng重复数据
提问于 2014-02-08 17:50:56
我在我的代码中使用了ng-repeat，我有'n‘个基于ng-repeat的文本框。我要将文本框与三列对齐。
这是我的代码
<div class="control-group" ng-repeat="oneExt in configAddr.ext">
{{$index+1}}.
<input type="text" name="macAdr{{$index+1}}"
id="macAddress" ng-model="oneExt.newValue" value=""/>
</div>回答 16
Stack Overflow用户
发布于 2014-06-26 06:52:53
M59的答案非常好。我不喜欢它的一点是，它使用divs来存储潜在的表数据。
因此，结合M59的过滤器(答案在上面的某处)，这里是如何在表格中显示它。
<table>
<tr class="" ng-repeat="rows in foos | chunk:2">
<td ng-repeat="item in rows">{{item}}</td>
</tr>
</table>Stack Overflow用户
发布于 2015-01-29 15:23:34
下面是一种更简单的方法：
<table>
<tr ng-repeat="item in lists" ng-hide="$index%2!==0">
<td>
<label>{{ lists[$index].name}}</label>
</td>
<td ng-hide="!lists[$index+1]">
<label>{{ lists[$index+1].name}}</label>
</td>
</tr>
</table>Cumulo Nimbus的答案对我很有用，但我想要用div包装这个网格，当列表太长时，div可以显示滚动条。
为了实现这一点，我将style="height:200px; overflow:auto"添加到表周围的一个div中，这使得它显示为一个单独的列。
现在适用于长度为1的数组。
Stack Overflow用户
发布于 2015-03-25 20:37:35
我的方法是一种混合的方法。
我的目标是有一个适应屏幕尺寸的网格。我想要3列用于lg，2列用于sm和md，1列用于xs。
首先，我使用angular $window服务创建了以下作用域函数：
$scope.findColNumberPerRow = function() {
var nCols;
var width = $window.innerWidth;
if (width < 768) {
// xs
nCols = 1;
}
else if(width >= 768 && width < 1200) {
// sm and md
nCols = 2
} else if (width >= 1200) {
// lg
nCols = 3;
}
return nCols;
};然后，我使用了@Cumulo Nimbus提出的类：
.new-row {
clear: left;
}在包含ng-repeat的div中，我添加了resizable指令，如this page中所述，以便每次调整时间窗口的大小时，angular $window服务都会更新为新值。
最后，在重复的div中，我有：
ng-repeat="user in users" ng-class="{'new-row': ($index % findColNumberPerRow() === 0) }"请让我知道这种方法中的任何缺陷。
希望能对您有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21644493
复制相关文章
相似问题