Как разбить элементы на 3 столбца для цикла?

Question

Как разбить элементы (сетки) на 3 столбца контейнера с помощью цикла for

Вывод шахты не соответствует тому, что я хочу, чтобы он был

       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>

Answer 2

Это должно сократить его:

let rowCount = 3;

// Build temp array for example 
let arr = [...Array(100)].map((e, i) => i);

for (let i = 0; i < arr.length; i += rowCount) {
  // Container to hold current row
  let tmp = [];
  for (let k = 0; k < rowCount; k++) {
    if (i + k === 0) {
      tmp.push(arr[i + k]);
    } else {
      tmp.push(arr[i + k] || 'n/a');
    }
  }
  console.log(tmp);
}