如何使用引导程序将 ng-repeat 数据拆分为三列 [英] how to split the ng-repeat data with three columns using bootstrap

问题描述

我在代码中使用 ng-repeat 我有 'n' 个基于 ng-repeat 的文本框.我想将文本框与三列对齐.

这是我的代码

{{$index+1}}.<input type="text" name="macAdr{{$index+1}}"id="macAddress" ng-model="oneExt.newValue" value=""/>

解决方案

最可靠和技术上正确的方法是在控制器中转换数据.这是一个简单的块函数和用法.

function chunk(arr, size) {var newArr = [];for (var i=0; i

那么您的视图将如下所示:

<div class="span4" ng-repeat="item in rows">{{item}}</div>

如果您在 ng-repeat 中有任何输入，您可能希望在数据被修改或提交时取消分块/重新加入数组.这是在 $watch 中的样子，以便数据始终以原始合并格式可用:

$scope.$watch('chunkedData', function(val) {$scope.data = [].concat.apply([], val);}， 真的);//深度观察

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

这个过滤器的问题在于它每次都返回新的嵌套数组.Angular 正在观察过滤器的返回值.过滤器第一次运行时，Angular 知道该值，然后再次运行以确保它完成更改.如果两个值相同，则循环结束.如果不是，过滤器将一次又一次地触发，直到它们相同，或者 Angular 意识到正在发生无限摘要循环并关闭.因为新的嵌套数组/对象以前没有被 Angular 跟踪，所以它总是看到与以前不同的返回值.要修复这些不稳定"过滤器，您必须将过滤器包装在 memoize 函数中.lodash 有一个 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() {返回记忆(块)；});

这是一个带有此过滤器的示例:

<div class="column" ng-repeat="行中的项目">{{($parent.$index*row.length)+$index+1}}.{{物品}}

垂直订购商品

1 42 53 6

关于垂直列(从上到下列表)而不是水平列(从左到右)，确切的实现取决于所需的语义.不均匀划分的列表可以以不同的方式分布.这是一种方法:

<div class="column" ng-repeat="行中的项目">{{物品}}

var data = ['a','b','c','d','e','f','g'];$scope.columns = columnize(data, 3);函数列化(输入，列){var arr = [];for(i = 0; i < input.length; i++) {var colIdx = i % cols;arr[colIdx] = arr[colIdx] ||[];arr[colIdx].push(input[i]);}返回 arr;}

然而，获取列的最直接、最简单的方法是使用 CSS 列:

.columns {列:3；}

<div ng-repeat="['a','b','c','d','e','f','g'] 中的项目">{{物品}}

I am using ng-repeat with my code I have 'n' number of text box based on ng-repeat. I want to align the textbox with three columns.

this is my code

<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>

解决方案

The most reliable and technically correct approach is to transform the data in the controller. Here's a simple chunk function and usage.

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);

Then your view would look like this:

<div class="row" ng-repeat="rows in chunkedData">
  <div class="span4" ng-repeat="item in rows">{{item}}</div>
</div>

If you have any inputs within the ng-repeat, you will probably want to unchunk/rejoin the arrays as the data is modified or on submission. Here's how this would look in a $watch, so that the data is always available in the original, merged format:

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

Many people prefer to accomplish this in the view with a filter. This is possible, but should only be used for display purposes! If you add inputs within this filtered view, it will cause problems that can be solved, but are not pretty or reliable.

The problem with this filter is that it returns new nested arrays each time. Angular is watching the return value from the filter. The first time the filter runs, Angular knows the value, then runs it again to ensure it is done changing. If both values are the same, the cycle is ended. If not, the filter will fire again and again until they are the same, or Angular realizes an infinite digest loop is occurring and shuts down. Because new nested arrays/objects were not previously tracked by Angular, it always sees the return value as different from the previous. To fix these "unstable" filters, you must wrap the filter in a memoize function. lodash has a memoize function and the latest version of lodash also includes a chunk function, so we can create this filter very simply using npm modules and compiling the script with browserify or webpack.

Remember: display only! Filter in the controller if you're using inputs!

Install lodash:

npm install lodash-node

Create the filter:

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);
});

And here's a sample with this filter:

<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>

Order items vertically

1  4
2  5
3  6

Regarding vertical columns (list top to bottom) rather than horizontal (left to right), the exact implementation depends on the desired semantics. Lists that divide up unevenly can be distributed different ways. Here's one way:

<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;
}

However, the most direct and just plainly simple way to get columns is to use CSS columns:

.columns {
  columns: 3;
}

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

这篇关于如何使用引导程序将 ng-repeat 数据拆分为三列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！