AngularJS of-repeat 分组二维

Question

我想做的是使用 ng-repeat 指令在 angularjs

中迭代某种二维

我有一个长列表，我想在 html table 中显示，假设每行 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

我为您提供了一个解决方案，可能有更好的解决方案，但这会很好用。

首先你从你的数组中创建二维数组（即使用 reduce），然后在 tr 和 td 上用 ng-repeat 显示它：

JS - 我使用了简单的 1,2,3,4,5,6,...等。数组：

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;
  }, []);

它可能看起来不太好，但它确实很好，并且会创建前四个元素的数组，如 [[1,2,3,4], [5,6,7,8]] 基本上是分组元素.

之后你只需要像这里一样遍历整个列表：

<table>
      <tr ng-repeat="x in mylist">
        <td ng-repeat="num in x">
          {{num}}
        </td>
      </tr>
    </table>

并且你会在一个 table 行中得到每四个元素的 table。

哦，忘了我的fiddle：https://jsfiddle.net/pegla/b0pckLgh/

希望对您有所帮助，干杯。

Answer 2

因此对于 '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>

AngularJS of-repeat 分组二维

AngularJS ng-repeat grouped 2 dimensional

angularjs

angularjs-ng-repeat