首页 文章

Ng-Repeat数组到行和列

提问于
浏览 次
14

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

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

opt1 opt2 opt3
opt4 opt5 opt6
opt7
angularjs ng-repeat

5 回答

  • 0

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

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

    http://jsfiddle.net/JG3A5/

    回复于
  • 9

    对不起我的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>
    回复于
  • 6

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

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

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

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

    回复于
  • 18

    我发现使用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")
    回复于
  • 1

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

    It seems putting the logic in your JavaScript is the best method. I would just bite-the-bullet and look into:

    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是每行所需的任意列数

    • @返回：一个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) - but please post back if you come across an elegant way of filtering it in the ng-repeat .

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

    编辑

    此算法的使用应与 Matrical Data-Structure 结合使用，以提供 push ， pop ， splice 和其他方法 - 与适当的逻辑串联，以便在需要时补充 Bi-Directional Data-Binding . 换句话说，数据绑定不会开箱即用（当然），因为当新项目添加到列表中时，必须重新评估整个列表以保持矩阵的结构完整性 .

    Suggestion: 将 $filter('matrical')($scope.list) 语法与 $scope.$watch 结合使用，并重新编译/计算矩阵的项目位置 .

    干杯!

    回复于

相关问题