Question

我有一个现有的HTML模板，可以使用ngRepeat，

在页面上放置切片

<div ng-repeat="product in productList">
    <div class="product-tile">
       Product content goes here...
    </div>
</div>

设计师现在需要将每3个瓷砖包裹在一个额外的div中。

通常情况下，我会循环遍历列表，

将每个循环分为3个项目，其中3个瓷砖包裹在div中迭代，测试是否存在第二和第三个元素（对于何时列表长度不是3）
或者单步执行列表正常时，检查项目的索引。如果一个mod 3 等于0，然后我会添加额外的div标签

但我无法看到我在Angular中的表现。有关如何处理此事的任何建议吗？

Answer 1

＆＃34; prime＆＃34; ViewModel因此适合您的View - 它有一个名为 View -Model的原因。因此，您修改后的productList可以是：

$scope.productList = 
  [
    [ {/* product */ }, { }, { } ],
    [ { }, { }, { } ],
    // etc...
  ];

所以，要迭代你会嵌套ng-repeat s：

<div ng-repeat="row in productList">
  <div ng-repeat="product in row" class="product-row-group">
    <div class="product-tile">
    </div>
  </div>
</div>

但是通过数组＆＃34;伪步＆＃34; 是可能的（尽管效率低下）：

<div ng-repeat="product in productList">
  <div ng-if="$index % 3 === 0" 
       ng-init="group = productList.slice($index, $index + 3)">
    <div class="products-row">
      <div class="product-tile" ng-repeat="grItem in group">
        {{grItem}}
      </div>
    </div>
  </div>
</div>

第一个ng-repeat遍历整个数组，但内部ng-if仅渲染每个第3个项目，ng-init创建一个由3个产品别名为group的子数组。内部ng-repeat会覆盖3个产品group中的项目。

<强> Demo

Answer 2

我唯一能想到的就是在将原始productList数组放入数组数组时对其进行一次分区，然后使用嵌套的ng-repeat来获取所需的结构

以下说明了这种方法：

angular.module('stackoverflow', []).controller('ProductListsCtrl', function($scope) {
  $scope.productLists = partition([1, 2, 3, 4, 5, 6, 7, 8], 3);
});

/* You could put this in a utility library or something */
function partition(coll, size) {
  var groups = [];
  for (var groupIndex = 0, numGroups = Math.ceil(coll.length / size);
       groupIndex < numGroups;
       groupIndex++) {
    var startIndex = groupIndex * size;
    groups.push(coll.slice(startIndex, startIndex + size));
  }
  return groups;
}

.product-tile {
  display: inline-block;
  background-color: #9A9EDA;
  height: 100px;
  width: 100px;
  line-height: 100px;
  vertical-align: middle;
  text-align: center;
  margin-right: 10px;
}
.wrapper {
  margin: 5px;
  padding: 10px;
  background-color: #634AFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="stackoverflow" ng-controller="ProductListsCtrl">
  <div ng-repeat="productList in productLists" class="wrapper">
    <div class="product-tile" ng-repeat="product in productList">
      {{product}}
    </div>
  </div>
</div>

更改ngRepeat的步长

2 个答案: