Angular.js using bootstrap and dynamically creating rows

Question

I am trying to figure out how to dynamically create bootstrap row divs with a class of row-fluid with angular.js using the ng-repeat directive.

Here is the angular:

 <div ng-repeat="task in tasks" class="row-fluid">
     <div class="span6 well">{{task.name}}</div>
 </div>

This does not work though. The bootstrap html I wish to generate is:

http://jsfiddle.net/YKkXA/2/

Basically I need to do mod 2 of the index inside of the ng-repeat, and if its 0, close out the </div> and create a new <div class="row-fluid">. How is this possible?

You can use the predefined variable $index inside the ng-repeat loop — remigio
– remigio, Commented Feb 7, 2013 at 10:47
Can you give an example, how exactly would $index help us? We need basically an if statement inside of the ng-repeat. — Justin
– Justin, Commented Feb 7, 2013 at 10:49
I watched the example, there is no way to do it using ngRepeat. You should write a custom directive, creating the html dinamically — remigio
– remigio, Commented Feb 7, 2013 at 11:33
You should accept Anthony's answer to this - it solves the problem, and as this is the first result when searching for this in Google it should be pointed out that it's the right way to do it. — JVG
– JVG, Commented Jul 10, 2013 at 13:05
See my answer here for a filter to handle this that does NOT cause an infinite digest: stackoverflow.com/a/21653981/1435655 — m59
– m59, Commented Feb 9, 2014 at 1:52

Community · Accepted Answer · 2017-05-23 12:09:20Z

14

The idea is to filter your items in order to group them, and make a second ngRepeat to iterate on sub-items.

First, add that filter to your module :

module.filter('groupBy', function() {
    return function(items, groupedBy) {
        if (items) {
            var finalItems = [],
                thisGroup;
            for (var i = 0; i < items.length; i++) {
                if (!thisGroup) {
                    thisGroup = [];
                }
                thisGroup.push(items[i]);
                if (((i+1) % groupedBy) === 0) {
                    finalItems.push(thisGroup);
                    thisGroup = null;
                }
            }
            if (thisGroup) {
                finalItems.push(thisGroup);
            }
            return finalItems;
        }
    };
});

In your controler (because if you filter directly in your template, then you will have a $digest loop):

function TaskCtrl() {
    $scope.tasksGroupBy2 = $filter('groupBy')(taskGroup, 2);
}

And in your .html :

<div ng-repeat="taskGroup in tasksGroupBy2" class="row-fluid">
    <div ng-repeat="task in taskGroup" class="span6 well">{{task.name}}</div>
</div>

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Mar 19, 2013 at 10:56

Anthony O.

25k23 gold badges114 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

JVG Over a year ago

To anyone stumbling across this, this should be the accepted answer - worked just fine for me.

Tom Teman Over a year ago

On the one hand, this avoids using complicated directives (which will ng-repeat on all the items and create the rows and columns dynamically). On the other - the items have now been split up, making traversing them and other 'all items' functions with 2-way binding less... nice :-P

m59 Over a year ago

Here's how to do this in the view without the infinite digest: stackoverflow.com/a/21653981/1435655

e382df99a7950919789725ceeec126 Over a year ago

Here is a gist including the test for it: gist.github.com/mrzmyr/10972141

alex952 · Accepted Answer · 2013-06-05 15:05:27Z

As an improvement to the answer Anthony gave, I would say that you could save yourself a lot of trouble using the slice method instead of going through all those conditions.

Try defining your filter as it follows:

module.filter('group', function() {
    return function(items, groupItems) {
        if (items) {
            var newArray = [];

            for (var i = 0; i < items.length; i+=groupItems) {
                if (i + groupItems > items.length) {
                    newArray.push(items.slice(i));
                } else {
                    newArray.push(items.slice(i, i + groupItems));
                }
            }

            return newArray;
        }
    };
});

After that you can call the filter on your controller as Anthony pointed out in his response:

function Controller ($scope) {
    $scope.itemsGrouped = $filter('group')(itemsArray, 5);
}

Skiper Skiprovic · Accepted Answer · 2013-04-18 09:50:34Z

0

Off Topic: using bootstrap you can just place divs of class="span6 well" into one bigass row as they will stack nicely. (You will get an responsive layout too). Sorry if it was just an example of the behaviour that bootstrap can't handle. Anthony and Remigio are right; you have to create an extra module vehicle that will generate divs immersed into your ng-repeated tags.

edited Apr 18, 2013 at 9:50

answered Apr 18, 2013 at 9:43

Skiper Skiprovic

3613 silver badges6 bronze badges

1 Comment

arg20 Over a year ago

This is not entirely correct. Sometimes it works, othertimes it won't, depending on the height of the divs.

Collectives™ on Stack Overflow

Angular.js using bootstrap and dynamically creating rows

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related