Question

我想在表格行中显示我的数据，每行2个元素。

例如，如果我有这个数组：

['dinesh', 'kumar', 'mahesh', 'rathore']

结果如下：

--------------------
| dinesh | kumar   |
--------------------
| mahesj | rathore |
--------------------

当我将ng-repeat放入tr时，每行都有一个单元格。

当我将ng-repeat放入td时，我会收到一行包含4个单元格

我尝试使用$index + 1，但它没有更改实际索引值。所以我得到重复的元素。解决方案是什么？

Answer 1

$ index是当前的重复迭代。您无法更改索引值，只能将其用于显示目的。

stackoverflow

上有类似的帖子

解决方案是重复分割模型：

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(['dinesh', 'kumar', 'mahesh', 'rathore'], 3);

然后：

<table>
  <tr ng-repeat="row in chunkedData">
    <td ng-repeat="element in row">
      {{element}}
    </td>
  </tr>
</table>

（如果您需要垂直订购商品，请点击链接）

但使用表tr / td是一个彻底的痛苦。使用div和css可能是一个更好的解决方案。它看起来像

<div ng-repeat="element in elements" ng-style="{'float:left;' : $even}">
      {{element}}
</div

Answer 2

将此添加到您的javascript代码..

    // divide array
Array.prototype.divideIt = function(d){
    if(this.length <= d) return this;
    var arr = this,
        hold = [],
        ref = -1;
    for(var i = 0; i < arr.length; i++){
        if(i % d === 0){
            ref++;
        }
        if(typeof hold[ref] === 'undefined'){
            hold[ref] = [];
        }
        hold[ref].push(arr[i]);
    }

    return hold;
};

然后使用以下angularjs解决方案（类似于jbigman解决方案）：

<div ng-app>
    <table>
        <tr ng-repeat="subModel in ['dinesh', 'kumar', 'mahesh', 'rathore'].divideIt(2)">
            <td ng-repeat="element in subModel ">{{element}}</td>
        </tr>
    </table>
</div>

＆＃13;

// divide array
Array.prototype.divideIt = function(d) {
  if (this.length <= d) return this;
  var arr = this,
    hold = [],
    ref = -1;
  for (var i = 0; i < arr.length; i++) {
    if (i % d === 0) {
      ref++;
    }
    if (typeof hold[ref] === 'undefined') {
      hold[ref] = [];
    }
    hold[ref].push(arr[i]);
  }

  return hold;
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <table>
    <tr ng-repeat="subModel in ['dinesh', 'kumar', 'mahesh', 'rathore'].divideIt(2)">
      <td ng-repeat="element in subModel ">{{element}}</td>
    </tr>
  </table>
</div>

＆＃13;

如何增加角度模板中的$ index值？

2 个答案: