我正在使用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>
最可靠和技术上正确的方法是转换控制器中的数据。下面是一个简单的块函数和用法。
function chunk(arr, size) {
var newArr = [];
for (var i=0; i<arr.length; i+=size) {
newArr.push(arr.slice(i, i+size));
}
return newArr;
}
$scope.chunkedData = chunk(myData, 3);
然后，您的视图将如下所示：
<div class="row" ng-repeat="rows in chunkedData">
<div class="span4" ng-repeat="item in rows">{{item}}</div>
</div>
如果在 中有任何输入，则可能需要在修改数据或提交时取消取消/重新加入数组。下面是 这在 中的外观，以便数据始终以原始的合并格式提供：ng-repeat$watch
$scope.$watch('chunkedData', function(val) {
$scope.data = [].concat.apply([], val);
}, true); // deep watch
许多人更喜欢使用筛选器在视图中完成此操作。这是可能的，但只能用于显示目的！如果在此筛选视图中添加输入，则会导致可以解决但不太漂亮或不可靠的问题。
此筛选器的问题在于它每次都返回新的嵌套数组。Angular 正在监视筛选器的返回值。第一次运行过滤器时，Angular 知道该值，然后再次运行它以确保它完成更改。如果两个值相同，则结束循环。如果没有，过滤器将一次又一次地触发，直到它们相同，或者Angular意识到正在发生无限摘要循环并关闭。由于 Angular 以前未跟踪新的嵌套数组/对象，因此它始终认为返回值与以前的返回值不同。若要修复这些“不稳定”的筛选器，必须将筛选器包装在函数中。 有一个函数，最新版本的lodash还包括一个函数，所以我们可以使用模块非常简单地创建这个过滤器，并使用或编译脚本。memoizelodashmemoizechunknpmbrowserifywebpack
请记住：仅显示！如果您使用的是输入，请在控制器中进行筛选！
安装 lodash：
npm install lodash-node
创建过滤器：
var chunk = require('lodash-node/modern/array/chunk');
var memoize = require('lodash-node/modern/function/memoize');
angular.module('myModule', [])
.filter('chunk', function() {
return memoize(chunk);
});
下面是使用此筛选器的示例：
<div ng-repeat="row in ['a','b','c','d','e','f'] | chunk:3">
<div class="column" ng-repeat="item in row">
{{($parent.$index*row.length)+$index+1}}. {{item}}
</div>
</div>
1 4
2 5
3 6
关于垂直列（从上到下列出）而不是水平列（从左到右），确切的实现取决于所需的语义。分布不均匀的列表可以以不同的方式分布。这是一种方法：
<div ng-repeat="row in columns">
<div class="column" ng-repeat="item in row">
{{item}}
</div>
</div>
var data = ['a','b','c','d','e','f','g'];
$scope.columns = columnize(data, 3);
function columnize(input, cols) {
var arr = [];
for(i = 0; i < input.length; i++) {
var colIdx = i % cols;
arr[colIdx] = arr[colIdx] || [];
arr[colIdx].push(input[i]);
}
return arr;
}
但是，获取列的最直接且非常简单的方法是使用 CSS 列：
.columns {
columns: 3;
}
<div class="columns">
<div ng-repeat="item in ['a','b','c','d','e','f','g']">
{{item}}
</div>
</div>
这个解决方案非常简单：
JSON：
[{id:"1",name:"testA"},{id:"2",name:"test B"},{id:"3",name:"test C"},{id:"4",name:"test D"},{id:"5",name:"test E"}]
网页：
<div ng-controller="MyCtrl">
<table>
<tr ng-repeat="item in items" ng-switch on="$index % 3">
<td ng-switch-when="0">
{{items[$index].id}} {{items[$index].name}}
</td>
<td ng-switch-when="0">
<span ng-show="items[$index+1]">
{{items[$index+1].id}} {{items[$index+1].name}}
</span>
</td>
<td ng-switch-when="0">
<span ng-show="items[$index+2]">
{{items[$index+2].id}} {{items[$index+2].name}}
</span>
</td>
</tr>
</table>
</div>
