Bootstrap two column layout and ng-repeat (angularjs)

Question

I'm trying to create a two col layout with ng-repeat.

<div class="row">
   <div class="col-md-6" ng-repeat="item in items">
       Item: {{item}}
   </div>
</div>

This results in the following problem:

P.S. This problem has been answered before with native CSS cols but I want to do it with bootstrap.

P.S. The solution proposed below is not working.. anyone got any other ideas please?

Mathew Berg · Accepted Answer · 2015-08-20 16:50:09Z

11

You'll have to break it into two seperate columns, but it should be pretty easy after that:

<div class="row">
   <div class="col-md-6" ng-repeat="item in items | limitTo: items.length /2: 0">
       Item: {{item}}
   </div>
   <div class="col-md-6" ng-repeat="item in items | limitTo: items.length /2: items.length /2">
       Item: {{item}}
   </div>   
</div>

answered Aug 20, 2015 at 16:50

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

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

6 Comments

supersan Over a year ago

thanks! exactly the kind of solution i wanted because everything is handled in the view!

supersan Over a year ago

hi, is there a way to extend it to 3, 4 columns? I know I can always type "col-md-4" and change limit to items.length / 3, but i think it may possible to do so with nested ng-repeats with variable number of cols!

supersan Over a year ago

p.s. sorry one more thing.. i think items.length /2, gets Math.floor and it leaves out the last element. Is it okay to add +1 to it?

supersan Over a year ago

please see this plunkr: plnkr.co/edit/GdV116QqeawGpVOTHI25?p=preview there are 5 items, but it renders only the first four?

Mathew Berg Over a year ago

You're right, should just be able to get around that by adding 1. plnkr.co/edit/jkG6B51OBcvXsTNeOz8H?p=preview

|

Thirupathi cst · Accepted Answer · 2018-05-31 08:52:47Z

0

for that i'm taken two tables keep bootstrap styles

<table> <tr ng-repeat="cl in codelist" ng-if="$index<codelist.length/2">
                            <td>{{$index}}</td>

                        </tr></table>
<table> <tr ng-repeat="cl in codelist" ng-if="$index>=codelist.length/2">
                            <td>{{$index}}</td>

                        </tr></table>

that it show order by ordey 1 3 2 4 5 6 like this

answered May 31, 2018 at 8:52

Thirupathi cst

1522 silver badges10 bronze badges

Collectives™ on Stack Overflow

Bootstrap two column layout and ng-repeat (angularjs)

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related