CODEWITHSUNDEEP
angularjsangularjs-ng-repeatchecklist-model
Tharindu Senanayake
Tharindu Senanayake

Reputation: 285

Get ng-repeat data to appear in 4 columns

I'm getting list of data from Db to a view using ng-repeat. In order to select multiple values at once I'm using checklist-model. My code is as follows,

<div ng-repeat="item in items">
<input type=checkbox checklist-model="user.role" checklist-value="item"/>{{item}}
</div>

This will return a long list one below another. What I need is to get these data in the list to be displayed in 4 columns. Any help please!

Upvotes: 3

Views: 5028

Answers (2)

Khalid Hussain
Khalid Hussain

Reputation: 1694

Working Demo

This is what you are looking for. Hope that solve your problem.

 <div ng-repeat="product in products" ng-if="$index % 3 == 0" class="row">
    <div class="col-xs-4"> <input type="checkbox" checklist-model="user.role" checklist-value="{{products[$index]}}"/>{{products[$index]}}</div>
    <div class="col-xs-4"> <input type="checkbox" checklist-model="user.role" checklist-value="{{products[$index]}}"/>{{products[$index+1]}}</div>
    <div class="col-xs-4"> <input type="checkbox" checklist-model="user.role" checklist-value="{{products[$index]}}"/>{{products[$index+2]}}</div>
</div>

Output:

enter image description here

Upvotes: 1

Jeremy Hull
Jeremy Hull

Reputation: 1

You could use display:inline-block on your elements that you want in a row. How you lay them out within that row could be done different ways depending on what you are seeking. 

<div ng-repeat="item in items" style="display:inline-block;">
  <input type=checkbox checklist-model="user.role" checklist-value="item"/>{{item}}
</div>

Upvotes: 0

Related Questions