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>

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);
}

如何通过for循环将项目分为3列？

2 个答案: