0

So I am wondering how can I display only 3 items per row in my AngularJS ng-repeat div. I am not using bootstrap - I only use ionic framework.

Any help will be great!

Thanks, uksz

Here is my code sample:

<div users><{{users}}</div></div>

and my directive:

<div ng-repeat="user in users" id="user-picture">
    <img ng-src="{{user.cachedUserProfile.picture.data.url}}">{{user}}</div>
    <label class="attending-name"> {{user.displayName}}</label>
</div>
uksz
  • 18,239
  • 30
  • 94
  • 161
  • 3 items per row or 3 rows? – tpie Apr 21 '15 at 15:23
  • you need to show us your code... – DrCord Apr 21 '15 at 15:23
  • i have done that using a directive.. though for bootstrap.. it does one simple thing `var size = 12/items-per-row; className='col-md-'+size` and then use `class={{className}}` in html – harishr Apr 21 '15 at 15:24
  • 2
    this question has been answered already. [http://stackoverflow.com/questions/17643361/ngrepeat-limiting-number-of-displayed-results][1] [1]: http://stackoverflow.com/questions/17643361/ngrepeat-limiting-number-of-displayed-results – acabra85 Apr 21 '15 at 15:26
  • @entre : your solution is linked to bootStrap CSS component – aorfevre Apr 21 '15 at 15:26
  • 1
    Ionic use flexbox css style. If you are triying to make x-rows with a maximum of 3 elements you can use flex-wrap property and a ng-repeat inside a div with col-33 class. The css engine go to place the next div down automatically. – Jesús Quintana Apr 21 '15 at 15:38

0 Answers0