3. Onsen UI - lazy repeat using two column items

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Onsen UI - lazy repeat using two column items

  • J

    I have this template

         <ons-row>
        <ons-col width="22%" class="card" ons-lazy-repeat="SimilarDelegate"><!--ng-repeat="item in similarResults"-->
            <img ng-src="{{item .thumb}}" class="thumbnail" ng-click="showQuickInfo(item .id)" err-src="img/noimage.jpg" />
            <ons-row>
                <ons-col width="75%">{{item .name}}<br><ons-icon icon="md-star" size="22px"></ons-icon> {{item .rating}}</ons-col>
            </ons-row>
        </ons-col>
    </ons-row>

    Using ng-repeat my items are rendered in a two column row (each row has two items). But my list can go up to 16000 items and ng-repeat’ performance is not that good even with 300 items. I changed the code to use ons-lazy-repeat and the loading performance is now more than fine! but each row now has only one item instead of two. I’ve been trying to make it two items each row but nothing yet. Is there a way for ons-lazy-repeat to accomplish that?

    Thanks

    0