Tharindu Senanayake Tharindu Senanayake - 4 months ago 48
AngularJS Question

Display data from ng-repeat in multiple 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!

This was my previous question. For the answer for this I got this

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


and this

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


These codes make sure that the data are in a same row. But what I want is to add values into 4 separate columns. If there are 1000 data I need 200 data to be in one column, 200 in the second and so on. Please not that I'm using checklist-model

Answer
<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>

This did the trick. Thanks to @KhalidHussain