Hello,
I have list of 600 Objects loaded from Native (Android/iOS).
I want to show them 1x600 or 3x200 where 3 is column count and 200 - rows respectively.
For now I use list
1x600:
<ion-content has-header="true" has-tabs="true" has-subheader="true" scroll="true">
<div class="list">
<a ng-repeat="item in items" href="#" class="item item-avatar">
<pre>{{item|json}}</pre>
</a>
</div>
</ion-content>
What do you suggest:
- To use list with grid layout per item (aka row)
- To use single table 3 x N
BTW, I faced too bed performance when I try to show more then 50 items and I have Nexus 4.
Thanks
For performance issues, you may want to consider using bindonce. https://github.com/Pasvaz/bindonce
Take a look at Ionic’s built-in grid system : http://ionicframework.com/docs/components/#grid
1 Like
In addition to the grid system, the responsive breakpoints will help what ever data you’re showing adjust for smaller screens.
At a larger screen width, you could have all three columns appear as a normal table, then have them appeared stacked on top of each other for smaller screens
As seen here
At last I used this configuration:
<div class="row" ng-repeat="pet in new_groups | limitTo:30">
<div class="col" ng-repeat="val in pet">
<div class="item item-button-right">
<h3>{{val.title}}</h3>
<a class="button button-positive" href="#/pet/{{val.eventId}}"><i class="icon ion-ios7-telephone"></i> </a>
</div>
</div>
</div>
</div>
2 Likes