Question

我有一个简单的文本对象数组，我想在网格中显示。这是使用Ionic框架。

网格必须是：

固定高度
正好3行
水平滚动（无限列）
2个可见列，屏幕宽度< 768px（手机），4个可见列768px及以上（平板电脑）

我有列宽的媒体查询，我正在使用水平滚动功能。

如何使用ng-repeat（可能带有ngif ??）来创建网格，从第一列开始并在移动到下一列等之前用3行填充该列等等。

JS

var items = [
{text: "This is item1"},
{text: "This is item2"},
{text: "This is item3"},
.
.
.
]

CSS：

.myGridRow {
  height: 40%;
 }
 .myGridCol {
   width: 50%;
 }
 @media only screen and (min-width : 768px) {
   .myGridCol {
     width: 25%;
   }
 }

HTML

<ion-scroll direction="x">
 <div class="row myGridRow"> <!-- The single container for the whole grid -->

  <div ng-repeat="item in items"> <!-- only do this 3 times before starting a new row -->
   <div class="row"><div class="col myGridCol">{{item.text}}</div></div>
  </div>

</div>
</ion-scroll>

Desired Output

我被困在这里试图确定如何在每3行之后移动到下一列，或者这是否是正确的方法。

Answer 1

ng-repeat被限制为遍历集合，并且不能使用整数作为输入。但是，您可以为所需的重复次数创建占位符集合：

$scope.items = [/* The base collection */];
$scope.iterCount = 3; // The number of iterations before a new row is created
$scope.itemCount = Math.floor($scope.items.length / $scope.iterCount);

// Get a collection of items equally spaced from each other. For
// example: getSpacedItems([1, 2, 3, 4], 0, 2) == [1, 3]
$scope.getSpacedItems = function(collection, start, space) {
  var subColl = [];
  for(var i = start; i < collection.length; i += space) {
    result.push(collection[i]);
  }

  return result;
};

这些值可以这种方式应用于视图：

<div>
  <div class="row" ng-repeat="n in [0, 1, 2] track by $index">
    <div class="col myGridCol" ng-repeat="item in getSpacedItems(items, $index, iterCount)">{{item.text}}</div>
  </div>
</div>

Answer 2

我想这里有正确的解决方案 - 在控制器端使用数据转换数组。因此，您“旋转”您的2D数组，行变为列，列成为行。然后你只执行常规输出。这不是观点方面的任务。

如何使用ng-repeat和固定行数创建水平网格

2 个答案: