CODEWITHSUNDEEP
angularjs
Shashishekhar Hasabnis
Shashishekhar Hasabnis

Reputation: 1756

How to create a new row using ng-if in ng-repeat?

I am trying to create a new row after 10 elements in my list. Following is the code but I am not getting the desired result.

<div class="row">                                    
    <div class="col-sm-1" ng-repeat="q in questions">
         <button class="btn btn-danger" ng-click="select_question(q)">{{ $index + 1 }}</button>
         <br ng-if="$index/10 == 0">                                        
    </div>
    <div class="col-sm-1">
        <button class="btn btn-success" ng-click="select_new_question()">+</button>
    </div>
</div>

Not sure what mistake I am making?

Upvotes: 1

Views: 45

Answers (2)

Shashank Vivek
Shashank Vivek

Reputation: 17504

Check this plunkr

<div class="row">                                    
<div class="col-sm-1" ng-repeat="q in questions">
     <button class="btn btn-danger" ng-click="select_question(q)">{{ $index + 1 }}</button>

     <div ng-if="($index+1)%10 === 0">New Row</div>                                        
</div>
<div class="col-sm-1">
    <button class="btn btn-success" ng-click="select_new_question()">+</button>
</div>

Upvotes: 2

Kusum Kushwaha
Kusum Kushwaha

Reputation: 202

if you want to append a break after every 10 elements then you have to put
statement before button

<div class="row">                                    
    <div class="col-sm-1" ng-repeat="q in questions">
 <br ng-if="$index == 10">     
         <button class="btn btn-danger" ng-click="select_question(q)">{{ $index + 1 }}</button>

    </div>
    <div class="col-sm-1">
        <button class="btn btn-success" ng-click="select_new_question()">+</button>
    </div>
</div>

Upvotes: 0

Related Questions