在 angular 中每隔三行迭代一次

Question

我在遍历我的对象时遇到一些困难。问题是，我想要的是创建一个包含 3 列的行，并用来自控制器的信息填充它们。

<body ng-controller="StatisticsCtrl as statCtrl" ng-init="getValues()">
    <div id="contentWrapper" class="container-fluid">
        <div class="row">
            <div class="col-xs-12 col-lg-4"  ng-repeat="category in categoryDictionary">

                <div style="background-color: #0d1224; border-radius: 10px; padding:10px; ">

                    <div class="row">
                        <div class="col-xs-12"><h4><span class="rubriker kategoriRubrik">{{category.rubrik}}</span></h4></div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</body>

我现在做的是在创建列行时重复，但这不是我想要的最佳选择。我想要一个包含 3 列的行。我一整天都在疯狂地谷歌搜索，但没有找到任何帮助。非常感谢随我的示例代码一起提供的有效 jsfiddle！

Answer 1

修改一下：

js

var app = angular.module('myApp', []);

app.controller('myCtrl', ['$scope',function($scope) {
   $scope.categories = [
       { id: 1, name: 'A'},
       { id: 2, name: 'B'},
       { id: 3, name: 'C'},
       { id: 4, name: 'D'},
       { id: 5, name: 'E'},
       { id: 6, name: 'F'},
       { id: 7, name: 'G'},
     ];

     $scope.getRows = function() {
       var arr = [];
       for(var i=0;i<$scope.categories.length/3;i++) {
         arr.push(i);
       }
       console.log(arr);
       return arr;
     }
}]);

html:

  <body ng-app='myApp' ng-controller="myCtrl">
    <h1>Hello Plunker!</h1>
    <div class="row" ng-repeat="index in getRows()">
       <div class="col1">{{categories[$index*3].name}}<div>other stuff of category e.g. {{categories[$index*3].somethingElse}}</div></div>
       <div class="col2">{{categories[$index*3+1].name}}</div>
       <div class="col3">{{categories[$index*3+2].name}}</div>
    </div>
  </body>

此代码一行打印 3 个类别 plunker

Answer 2

我想你是在避开它，但遗憾的是，你必须切片你的对象。

您需要创建此 过滤器:

gameOnApp.filter('group', function() {
    return function(categories, size) {
        var categoriesGroup = array(),
            i = 1;
        while(categories[size*(i-1)]) {
            categoriesGroup.push(categories.slice(size*(i-1), size*i));
            i++;
        }
        return categoriesGroup;
    }
});

然后将您的 HTML 修改为如下所示：

<div class="col-xs-12 col-lg-4"  ng-repeat="categoryGroup in categoryDictionary | group:3">

    <div style="background-color: #0d1224; border-radius: 10px; padding:10px; ">

        <div class="row">
            <div class="col-xs-12" ng-repeat="category in categoryGroup">
                <h4>
                    <span class="rubriker kategoriRubrik">{{category.rubrik}}</span></h4></div>
                </div>

            </div>
        </div>

要突出显示您需要更改的内容，请执行以下操作：

div class="col-xs-12 col-lg-4" ng-repeat="categoryGroup in categoryDictionary | group:3"
div class="col-xs-12" ng-repeat="category in categoryGroup"

Answer 3

在过去的一年里，我已经多次回答过这个问题。使用 Bootstrap，您 不需要 手动将数据分组。

Bootstrap 自动为您换行。我有一个 Bootply 正在运行。

另见 This Answer。

编辑

如果您的行不等高，您可能需要在每 3 列之后添加一个 <div class="clearfix" /> 到 "reset" 列并修复对齐问题。

在 angular 中每隔三行迭代一次

Iterating every third row in angular

angularjs

angularjs-ng-repeat