Question

我尝试做的是使用ng-repeat指令在angularjs中迭代某种二维

我有一个很长的列表，我希望在html表格中显示，每行4个。

我目前正在使用某种解决方法来执行此操作：

<table>
    <tr>
        <td data-ng-repeat="x in my.list.slice(0, 4)">
           {{x}}
        </td>
    </tr>
    <tr>
        <td data-ng-repeat="x in my.list.slice(4, 8)">
           {{x}}
        </td>
    </tr>
    <tr>
        <td data-ng-repeat="x in my.list.slice(8, 12)">
           {{x}}
        </td>
    </tr>
    <tr>
        <!-- -->
    </tr>
</table>

我想知道<tr>是否有某种改变，但每次都有4 * <td>？

Answer 1

因此对于'tr'，你希望它产生数组长度的四分之一，因为每个都有4'td'。然后只需使用索引就可以计算出td所需的数组中的点。

<table>
    <tr data-ng-repeat="x in my.list.slice(0, my.list.length/4) track by $index">
        <td data-ng-repeat="x in my.list.slice($index*4, $index*4+4)">
           {{x}}
        </td>
    </tr>
</table>

编辑：上面只适用于可以被4整除的数组，如果你需要一些可以容纳半满的行，下面的代码应该可以工作。

<table>
    <tr data-ng-repeat="x in my.list.slice(0, (my.list.length/4)+1) track by $index" ng-if="myArr%4 !== 0">
        <td data-ng-repeat="x in my.list.slice($index*4, $index*4+4)">
            {{x}}
        </td>
    </tr>
    <tr data-ng-repeat="x in my.list.slice(0, my.list.length/4) track by $index" ng-if="myArr%4 === 0">
        <td data-ng-repeat="x in my.list.slice($index*4, $index*4+4)">
           {{x}}
        </td>
    </tr>
</table>

Answer 2

我有一个解决方案，可能会更好，但这样可以正常工作。

首先从阵列中制作二维数组（即使用reduce），然后在tr和td上使用ng-repeat显示它：

JS - 我使用简单的1,2,3,4,5,6，...等。阵列：

library(data.table)
signal <- fread(
  " i          Date Sig
1  2012-03-25  Go
2  2012-04-15 Stop
3  2012-04-22 Stop
4  2012-05-13 Stop
5  2012-05-20 Stop
6  2012-06-24  Go
7  2012-09-23  Go
8  2012-09-30  Go
9  2012-10-14 Stop
10 2012-12-02  Go
11 2012-12-16 Stop", drop = 1L, data.table = FALSE
)

它可能看起来不太好但是它确实非常好并且将创建前四个元素的数组，如[[1,2,3,4]，[5,6,7,8]]基本上分组元素。< / p>

之后你只需要在这里循环遍历整个列表：

let mylist = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
$scope.mylist = mylist.reduce((prevVal, currVal, index) => {
    if (!prevVal[Math.floor(index / 4)]) {
      prevVal[Math.floor(index / 4)] = [];
    }
    prevVal[Math.floor(index / 4)].push(currVal);
    return prevVal;
  }, []);

您将获得一个表格行中每个第四个元素的表格。

哦，忘了我的小提琴：https://jsfiddle.net/pegla/b0pckLgh/

我希望这很有帮助，干杯。

AngularJS ng-repeat分组为2维

2 个答案: