如何在NG-重复数据使用引导三列拆分 [英] how to split the ng-repeat data with three columns using bootstrap

问题描述

我使用的NG-重复我的code我有一个基于NG-重复文本框的N号。我想对齐三列文本框。

这是我的code

 ＆LT; D​​IV CLASS =控制组NG重复=oneExt在configAddr.ext＆GT;
    {{$指数+ 1}}。
    ＆LT;输入类型=文本名称={macAdr {$指数+ 1}}
           ID =MACADDRESSNG模型=oneExt.newValueVALUE =/＆GT;
＆LT; / DIV＆GT;
 

解决方案

最可靠，技术上是正确的做法是在控制器来转换数据。这里有一个简单的块功能和用法。

 功能块（ARR，大小）{
  变种newArr = [];
  对于（VAR I = 0; I＆LT; arr.length; I + =大小）{
    newArr.push（arr.slice（I，I +尺寸））;
  }
  返回newArr;
}$ scope.chunkedData =块（myData的，3）;
 

然后，你的看法是这样的：

 ＆LT; D​​IV CLASS =行NG-重复=，在chunkedData行＆GT;
  ＆LT; D​​IV CLASS =span4NG重复=行项目＆GT; {{}项}＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

如果您有中的任何输入NG-重复，你可能会想unchunk /重新加入阵列作为数据被修改或提交。这里是如何做到这一点看在 $观看，使数据始终可用原，合并格式为：

  $范围。$腕表（'chunkedData'，函数（VAL）{
  $ scope.data = [] .concat.apply（[]，VAL）;
}，真正的）; //深手表
 

许多人preFER在与过滤器的视图做到这一点。这是可能的，但应仅用于显示目的！如果您在此筛选视图中添加的投入，这将导致的问题可以来解决，但未pretty或可靠

用此过滤器的问题是，它返回新嵌套数组各一次。角是看从过滤器的返回值。过滤器运行在第一时间，角知道的值，然后重新运行，以确保它完成改变。如果这两个值相同，则循环结束。如果不是，则滤波器将连连触发，直到它们是相同的，或角实现无限消化循环发生和关闭。因为新的嵌套数组/对象是不可$ P $由角pviously跟踪，它总是能看到返回值从previous不同。要解决这些不稳定过滤器，必须包装在 memoize的函数的过滤器。 lodash 有一个 memoize的的功能和lodash的最新版本还包括块功能，这样我们就可以非常简单地使用 NPM 模块和 browserify 或创建此过滤器的WebPack 。

的记住：只显示！在控制器过滤器，如果你使用的输入！的

安装lodash：

  NPM安装lodash节点
 

创建过滤器：

  VAR块=要求（'lodash节点/现代/阵列/块'）;
VAR memoize的要求=（'lodash节点/现代/功能/ memoize的'）;angular.module（MyModule的，[]）
.filter（'块'，函数（）{
  返回memoize的（块）;
}）;
 

下面是此过滤器的一个示例：

 ＆LT; D​​IV NG重复=行['一'，'B'，'C'，'D'，'E'，'F'] |块： 3＆GT;
  ＆LT; D​​IV CLASS =列NG重复=项行＆GT;
    {{（$父。$指数* row.length）+ $指数+ 1}}。 {{项目}}
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

订单项垂直

  1 4
2 5
3 6
 

关于垂直列（列表顶部至底部）而不是水平（左到右），确切实施取决于所期望的语义。该不均匀瓜分列表可以分配不同的方式。这里有一种方法：

 ＆LT; D​​IV NG重复=排列＆GT;
  ＆LT; D​​IV CLASS =列NG重复=项行＆GT;
    {{项目}}
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

  VAR数据= ['一'，'B'，'C'，'D'，'E'，'F'，'G'];
$ scope.columns = columnize（数据，3）;
功能columnize（输入，COLS）{
  VAR ARR = [];
  对于（i = 0; I＆LT; input.length;我++）{
    VAR colIdx = I％COLS;
    ARR [colIdx] = ARR [colIdx] || [];
    ARR [colIdx] .push（输入[I]）;
  }
  返回ARR;
}
 

然而，最直接，说白了只是简单的方式来获得列是使用的 CSS列 ：

  .columns {
  列：3;
}
 

 ＆LT; D​​IV CLASS =列＆GT;
  ＆LT; D​​IV NG重复=项['一'，'B'，'C'，'D'，'E'，'F'，'G']＆GT;
    {{项目}}
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

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-重复数据使用引导三列拆分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！