如何使用 bootstrap 将 ng-repeat 数据拆分为三列

我在代码中使用 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，您可能希望在数据修改或提交时取消分块/重新加入数组。这在 a 中看起来是这样的$watch，以便数据始终以原始合并格式可用：

$scope.$watch('chunkedData', function(val) {
  $scope.data = [].concat.apply([], val);
}, true); // deep watch

许多人更喜欢使用过滤器在视图中完成此操作。这是可能的，但只能用于显示目的！如果您在此过滤视图中添加输入，则会导致以下问题can得到解决，但是不漂亮或不可靠.

这个过滤器的问题是它每次都会返回新的嵌套数组。 Angular 正在观察过滤器的返回值。过滤器第一次运行时，Angular 知道该值，然后再次运行它以确保它完成更改。如果两个值相同，则循环结束。如果不是，过滤器将一次又一次地触发，直到它们相同，或者 Angular 意识到正在发生无限摘要循环并关闭。由于 Angular 之前未跟踪新的嵌套数组/对象，因此它总是将返回值视为与之前不同。要修复这些“不稳定”的过滤器，您必须将过滤器包装在memoize功能。lodash has a memoize功能，最新版本的lodash还包括一个chunk函数，所以我们可以非常简单地使用创建这个过滤器npm模块并编译脚本browserify or webpack.

请记住：仅显示！如果您使用输入，请在控制器中进行过滤！

安装洛达什：

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 列 https://developer.mozilla.org/en-US/docs/Web/CSS/columns:

.columns {
  columns: 3;
}

<div class="columns">
  <div ng-repeat="item in ['a','b','c','d','e','f','g']">
    {{item}}
  </div>
</div>