CODEWITHSUNDEEP
angularjs-ng-repeatonsen-ui
JcDenton86
JcDenton86

Reputation: 932

Onsen UI - lazy repeat using two column items

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

Upvotes: 0

Views: 336

Answers (1)

Ilia Yatchev
Ilia Yatchev

Reputation: 1262

ons-lazy-repeat works only for vertical repetitions.

While ng-repeat just puts more items, so basically it loads everything, lazy repeat has a maximum number of items which it displays. So if you scroll down 1000 items you will still have only 100 items in the DOM at the same time. So remembering more complex stuff about how the DOM elements would be positioned if it they had existed becomes something complex. Therefore ons-lazy-repeat supports only vertical repetition. That's why you have probably noticed that it requires to know the height of the repeated element. So basically you cannot repeat items the way which you are describing. However there are still relatively easy ways to get your desired result.

Here are the 2 solutions which come to my mind:

  • Easiest solution is just to have the ons-lazy-repeat directive for the element which will contain these 2 items. Then everything will be fine. This is how ons-lazy-repeat should be used.

  • The second one is kind of hacky and I wouldn't really recommend it, but some people like these things. Basically you should be able to cheat the ons-lazy-repeat by giving it false values and doing some css hacks.

    For example lets say that you're 

    .item { height: 100px; width: 50%; }
.item:nth-child(even) { margin-top: -100px; margin-left: 50%; }

    And your height function can return 50 instead of 100. There is also a possibility that some of these styles may require !important, since the lazy-repeat may be adding some inline styles.

    CSS Hacks prevail once again.

But still I would recommend the first solution.

Upvotes: 1

Related Questions