CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
steffokeffo
steffokeffo

Reputation: 83

Iterating every third row in angular

I'm having some diffulculty iterating through my object. The thing is, what I want is to create a row with 3 columns and fill them with information from the controller.

<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>

what I do now is that i repeat within the creating of the column row, but thats not optimal for what i want. I want a row with 3 columns within. I've tried googling like crazy the entire day without finding any help. A working jsfiddle provided with my example code would be greatly appreciated!

Upvotes: 4

Views: 964

Answers (3)

Claies
Claies

Reputation: 22323

I've answered this question a few times over the last year. Using Bootstrap, you do not need to manually separate your data into groups.

Bootstrap automatically wraps columns for you. I have a Bootply of this in action.

See This Answer as well.

Edit

If your rows are not of equal height, you may need to add a <div class="clearfix" /> after every 3 columns, to "reset" the columns and fix alignment issues.

Upvotes: 1

klauskpm
klauskpm

Reputation: 3125

I think you were avoiding it, but, sadly, you have to slice your object.

You need to create this filter:

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;
    }
});

And modify your HTML to look like this:

<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>

To highlight what you need to change, follow this:

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"

Upvotes: 0

szapio
szapio

Reputation: 1008

Just modify this:

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>

this code prints 3 categories in one row plunker

Upvotes: 0

Related Questions