Apply ng-repeat on bootstrap row

Question

I'm trying to apply ng-repeat to the cols here marked with the class "company". I'm unable to do so because "row" breaks the sequence in between.

I need to show over 1000+ such companies. How should I proceed?

    <div class="row">
        <div class="col-sm-6 col-xs-12 company">
            <small>Users</small>
            <small>Followers</small>
        </div>
        <div class="col-sm-6 col-xs-12 company">
            <small>Users</small>
            <small>Followers</small>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-xs-12 company">
            <small>users</small>
            <small>Followers</small>
        </div>
        <div class="col-sm-6 col-xs-12 company">
            <small>users</small>
            <small>Followers</small>
        </div>
    </div>

this can help: https://stackoverflow.com/questions/21644493/how-to-split-the-ng-repeat-data-with-three-columns-using-bootstrap — wero, Jul 24 '15 at 11:29

score 0 · Answer 1 · answered Jul 24 '15 at 11:32

0

Try

<div class="row" ng-repeat="i in getNumber(1000)">
        <div class="col-sm-6 col-xs-12 company">
            <small>users</small>
            <small>Followers</small>
        </div>
        <div class="col-sm-6 col-xs-12 company">
            <small>users</small>
            <small>Followers</small>
        </div>
 </div>

In controller

$scope.getNumber = function(num) {
    return new Array(num);   
 }

answered Jul 24 '15 at 11:32

Sudharsan S

15,336
3
31
49

Thank you. However, you are missing the point. I'm repeating the binding "twice" here for users, followers, etc etc (45+ fields not shown here). This is a company page. There's other pages in the same format for college, students, alumni, etc etc. I don't want to bind twice every time. – user3362364 Jul 24 '15 at 11:54

score 0 · Answer 2 · answered Jul 25 '15 at 13:26

If you are trying to repeat the .company element, then you should apply the ng-repeat on the .company element.

<div class="row">
    <div class="col-sm-6 col-xs-12 company" ng-repeat="i in getNumber(1000)">
        <small>users</small>
        <small>Followers</small>
        <small>...</small>
    </div>
</div>

If you are worried about .col-sm-6 not wrapping to the next row for the 3rd+ elements, bootstrap and the browsers are smart to wrap them to the next line. See JSFiddle here - http://jsfiddle.net/s0x7v41p/1/.

Apply ng-repeat on bootstrap row

2 Answers2