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

去年我曾几次回答过这个问题。使用Bootstrap，您不需要手动将数据分成组。

Bootstrap会自动为您包装列。我有Bootply这个在行动。

同样请参阅This Answer。

修改

如果您的行数不相同，则可能需要在每3列后添加<div class="clearfix" />，以及＃34;重置＆＃34;列和修复对齐问题。

Answer 2

只需修改一下：

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 3

我认为你是在避免它，但遗憾的是，你必须切割你的物体。

您需要创建过滤器：

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 =＆＃34; col-xs-12 col-lg-4＆＃34;类别字典|中的ng-repeat =＆＃34; categoryGroup 的组：3 ＆＃34;
div class =＆＃34; col-xs-12＆＃34; ng-repeat =＆＃34; categoryGroup＆＃34;
中的类别

以角度迭代每第三行

3 个答案: