我在我的代码中使用ng-repeat我有基于ng-repeat的n个文本框。我想将文本框与三列对齐。
这是我的代码
<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,以便始终以原始合并格式提供数据:
ng- repeat
$watch
$scope.$watch('chunkedData', function(val) { $scope.data = [].concat.apply([], val); }, true); // deep watch
许多人喜欢在视图中使用过滤器来完成此操作。这是可能的,但只能用于显示目的!如果在此过滤后的视图中添加输入,将导致 可以 解决的问题,但 不是很漂亮或不可靠 。
该过滤器的问题在于它每次都会返回新的嵌套数组。Angular正在监视过滤器的返回值。过滤器第一次运行时,Angular会知道该值,然后再次运行它以确保完成更改。如果两个值相同,则循环结束。如果不是这样,过滤器将一次又一次触发,直到它们相同为止,否则Angular意识到正在发生无限摘要循环并关闭。由于新的嵌套数组/对象以前未被Angular跟踪,因此它总是将返回值视为与以前的值不同。要修复这些“不稳定”的过滤器,必须将过滤器包装在一个memoize函数中。lodash具有memoize功能,而lodash的最新版本也包含chunk功能,因此我们可以使用以下方法非常简单地创建此过滤器npm模块并使用browserify或编译脚本webpack。
memoize
lodash
chunk
npm
browserify
webpack
记住:仅显示! 如果使用输入,请过滤控制器!
安装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>