javascript - 如何通过for循环将项目分成3列？

Question

如何通过for循环将项目(网格)拆分为容器的3列

我的输出不符合我的要求

       let array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', and more++];

Let say array will display multiple grid. 


       let rowcount = Math.Ceil(array.length / 3)
       for (let i < 1; i < array.length; i++）{
        return i++;
       }

Mine output:- have 7 length of array , after rowcount will get
a        b        c
d        e        f        g
Wrong... 


Expected Output:-
a        b        c
d        e        f
g      more     more
more   more     more 
more   more     more
more   more     more
more   more     more
more   more     more
more   more     more
more

我想将 3 个项目打印到每一行，否则打印到下一行，即使没有 3 个项目(可能只有 1 或 2 个)。有人知道解决方案吗？

Answer 1

您可以使用 ng-repeat 并观察 $index 的值来执行此操作。以下是使用一些 CSS 来应用 float 和 clear 来模拟列的示例。 ng-repeat 需要唯一值，因此我使用 track by 以防万一您的集合没有唯一标识符。

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.items = [];
    for (let i = 65; i < 91; i++) {
      $scope.items.push(String.fromCharCode(i));
    }
  });

.column {
  width: 50px;
  float: left;
  text-align: center;
}

.last {
  clear: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <table>
    <div ng-repeat="item in items track by $index" class="column" ng-class="{ last: $index % 3 === 0 }">
      {{ item }}
    </div>
  </table>
</div>