ng-repeat，用 div 填充一行后，如何创建新行以继续归档？

Question

我正在创建 divs，其 class 是“col-lg-3”，每行 4 个。 Bootstrap 网格需要一个“容器”div，其中包含“行”div，然后填充“col--”divs。那么，如何在每行有4div的时候新建一个“行”div，并继续填充下一个“行”div?

（我看到类似表格和列表的问题，但不是这样的。）

例如，使用包含 6 个对象的数组 [object1 - object6]，这就是我想要的结果：

<div class="container">
    <div class="row">
        <div class="col-lg-3">object1</div>
        <div class="col-lg-3">object2</div>
        <div class="col-lg-3">object3</div>
        <div class="col-lg-3">object4</div>
    </div>
    <div class="row">
        <div class="col-lg-3">object5</div>
        <div class="col-lg-3">object6</div>
    </div>
</div>

Answer 1

一种方法是将初始数组分块成多维数组并使用嵌套 ng-if

// create some dummy data of 15 objects
const data = Array.from({length:15},(_,i)=>({text:`Item #${i+1}`}));


angular.module("myApp", [])
  .controller("myCtrl", function() {    
    this.rows = [];
    // chunk into sub arrays of  4 per row
    for (let i = 0; i < data.length; i = i + 4) {
      this.rows.push(data.slice(i, i + 4))
    }
  })

.row {
  border: 2px solid #ccc;
  margin: .5em
}

.col {
  width: 15%;
  margin: .5em;
  border: 1px solid green;
  display:inline-block;
  text-align:center
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as $ctrl">
  <div ng-repeat="row in $ctrl.rows" class="row">
    <div ng-repeat="item in row" class="col">{{item.text}}</div>
  </div>
</div>

Answer 2

在 Bootstrap 5.0 中，他们允许使用“col-”div 而无需嵌套在“row”div 中。这意味着您可以执行 ng-repeat 而不必创建“行”div。

https://getbootstrap.com/docs/5.0/layout/columns/#standalone-column-classes

ng-repeat，用 div 填充一行后，如何创建新行以继续归档？

ng-repeat, after filling a row with divs, how do i make a new row to continue filing?

angularjs