Question

感谢您花时间阅读本文，我想知道如何使用ng-repeat创建一个类似于选项框的网格。我想取一个数组重复第n个项目，然后移动到下一行或列，直到列出所有项目。 e.g。

假设我有一个类似[opt1,opt2,opt3,opt4,opt5,opt6,opt7]的数组，我想像这样显示：

opt1 opt2 opt3
opt4 opt5 opt6
opt7

Answer 1

这比AngularJS更像是样式/标记问题。如果你真的想，你可以这样做：

<span ng:repeat="(index, value) in array">
    {{value}}<br ng:show="(index+1)%3==0" />
</span>

http://jsfiddle.net/JG3A5/

Answer 2

抱歉我的HAML和Bootstrap3：

.row
  .col-lg-4
    %div{'ng:repeat' => "item in array.slice(0, array.length / 3)"}
      {{item}}
  .col-lg-4
    %div{'ng:repeat' => "item in array.slice(array.length / 3, array.length * 2/3)"}
      {{item}}
  .col-lg-4
    %div{'ng:repeat' => "item in array.slice(array.length * 2/3, array.length)"}
      {{item}}

还有另一个版本，可以使用过滤器：

<div class="row">
  <div class="col-md-4" ng-repeat="remainder in [0,1,2]">
    <span ng-repeat="item in array" ng-if="$index % 3 == remainder">{{item}}</span>
  </div>
</div>

Answer 3

如果您的所有项目都在一个阵列中，那么最好的办法就是在CSS中创建一个网格。本文应该有所帮助：http://css-tricks.com/dont-overthink-it-grids/

您可以使用ng-repeat中的$ index为列应用正确的类（在本例中为4列网格）：

<div class="col-{{ $index % 4 }}"></div>

如果你有一个二维数组（分成行和列），那么就会开辟更多的可能性，比如实际使用HTML表。

Answer 4

我发现使用ng-repeat与ng-if结合并使用$ index抵消任何索引更容易。请记住下面的玉石：

div(ng-repeat="product in products")
    div.row(ng-if="$index % 2 === 0")
      div.col(ng-init="p1 = products[$index]")
          span p1.Title
      div.col(ng-if="products.length > $index + 1", ng-init="p2 = products[$index + 1]")
          span p2.Title
      div.col(ng-if="products.length <= $index + 1")

Answer 5

在性能，动态和可读性之间

似乎将JavaScript中的逻辑放在最佳方法中。我只想咬紧牙关，看看：

function listToMatrix(list, n) {
    var grid = [], i = 0, x = list.length, col, row = -1;
    for (var i = 0; i < x; i++) {
        col = i % n;
        if (col === 0) {
            grid[++row] = [];
        }
        grid[row][col] = list[i];
    }
    return grid;
}

var matrix = listToMatrix(lists, 3);
console.log('#RedPill', matrix);

@ Params :( list，n）
- 其中list是任何数组，n是每行所需的任意列数
@ Return：A matroid
@注意：此函数用于根据任意数量的列来定位子元数，其行数存在差异。换句话说，x =所需列，y = n。

然后，您可以创建一个角度filter来处理此问题：

过滤器：

angular.module('lists', []).filter('matrical', function() {
    return function(list, columns) {
        return listToMatrix(list, columns);
    };
});

控制器：

function listOfListsController($scope) {
    $scope.lists = $http.get('/lists');
}

查看：

<div class="row" ng-repeat="row in (lists | matrical:3)">
    <div class="col col-33" ng-repeat="list in row">{{list.name}}</div>
</div>

通过此操作，您可以看到获得n行数 - 每行包含“3”列。当您更改所需列的数量时，您会注意到行数会相应更改（假设列表长度始终相同;））。

这是fiddle。

注意，你得到的是'Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!。这是因为Angular在每次迭代时都会调用matrical函数。据称，您可以使用as results别名来阻止Angular重新评估集合，但我没有运气。为此，最好过滤控制器内部的网格，并将该值用于转发器：$filter('matrical')(items) - 但如果您遇到一种优雅的方式在{ {1}} 即可。

我再次强调，你可能会试图在你的视野中写下逻辑，从而走向黑暗的小巷 - 但我鼓励你在你看来尝试它，如果你还没有。

修改

此算法的使用应与 Matrical Data-Structure 结合使用，以提供ng-repeat，push，pop和其他方法 - 与适当的逻辑相结合，以补充双向数据绑定（如果需要）。换句话说，数据绑定不会开箱即用（当然），因为当新项目添加到列表中时，必须重新评估整个列表以保持矩阵的结构完整性。 < / p>

建议： 将splice语法与$filter('matrical')($scope.list)结合使用，然后重新编译/计算矩阵的项目位置。< / em>的

干杯！

Ng-Repeat数组到行和列

5 个答案:

在性能，动态和可读性之间

修改