Angularjs ng-repeat为每个第4项开始一个新行

Angularjs ng-repeat start a new row for each 4th item?

本文关键字：新行 一个 开始 4项 ng-repeat Angularjs      更新时间：2023-09-26

假设我有一个苹果清单，我想在每个篮子里放4个苹果。 在 HTML 中，它看起来像这样：

<div class="basket">
   <span class="apple">Green</span>
   <span class="apple">Green</span>
   <span class="apple">Green</span>
   <span class="apple">Green</span>
</div>
<div class="basket">
   <span class="apple">Green</span>
   <span class="apple">Green</span>
   <span class="apple">Green</span>
   <span class="apple">Green</span>
</div>

我希望能够在 Angualrjs 中使用 ng-repeat 来做到这一点：

<div class="basket" ng-repeat="apple in apples>
   <span class="apple">{{apple.color}}</span>
</div>

每 4 个苹果创建一个新篮子等。

你试过吗，ng-if

 <div ng-repeat="apple in apples" ng-if='$index % 4 == 0' class='basket'>
         <span class="apple"> {{apples[$index].color}}</span>
         <span class="apple"> {{apples[$index +1 ].color}}</span>
         <span class="apple"> {{apples[$index + 2].color}}</span>
         <span class="apple"> {{apples[$index + 3].color}}</span>
  </div>

看褶皱机

我认为你最好的答案在于你如何构建你的模型。 我会以分层方式填充它，以最好地支持所需的 html 渲染。

控制器 

app.controller('MainCtrl', function($scope) {
  $scope.appleBaskets = [{
    basketId: 1,
    apples: [{
      color: 'green'
    }, {
      color: 'red'
    }, {
      color: 'gold'
    }, {
      color: 'red'
    }, ]
  }, {
    basketId: 2,
    apples: [{
      color: 'green'
    }, {
      color: 'red'
    }, {
      color: 'green'
    }, {
      color: 'yellow'
    }]
  }, {
    basketId: 3,
    apples: [{
      color: 'green'
    }, {
      color: 'red'
    }, {
      color: 'green'
    }, {
      color: 'red'
    }]
  }]
});

.HTML

<body ng-controller="MainCtrl">
  <div ng-repeat="appleBasket in appleBaskets">
    <div>{{appleBasket.basketId}}</div>
    <div ng-repeat="apple in appleBasket.apples">
      <span>{{apple.color}}</span>
    </div>
  </div>
</body>

一种方法是拥有一个basket数组，每个数组包含一个apple数组。然后你可以这样嵌套ng-repeat...

<div class="basket" ng-repeat="basket in baskets">
   <span class="apple" ng-repeat="apple in basket.apples">{{apple.color}}</span>
</div>

如果您只想拥有一维苹果数组而不是包含苹果的篮子的二维数组，那么您可以使用 CSS 将苹果直观地分组为四维数组。

一种方法是设置一个名为 new-line 的 CSS 类，并定义它以设置display: block;或任何你想用来强制新行的内容。

然后使用 ng-class 根据$index值动态设置 CSS。

<div class="basket" ng-repeat="apple in apples" ng-class="{ 'new-line' : $index % 4 === 0 }">
   <span class="apple">{{apple.color}}</span>
</div>

如果您知道类basket的宽度，则可以将类apple的 with 设置为总宽度的 25%：

.basket {
    width: 500px;
}
.apple {
    width: 125px;
}
相关文章：