kamilkp / angular-vs-repeat

Virtual Scroll for AngularJS ngRepeat directive
http://kamilkp.github.io/angular-vs-repeat/
MIT License
818 stars 228 forks source link

Using ionic-checkbox loads only part of the Array #175

Open stib opened 7 years ago

stib commented 7 years ago

Hi,

I am using ionic 1.3.1 and angular 1.5.8. In my Html file I have code like below

        <div vs-repeat>
            <ion-checkbox style="padding: 0px 0px 0px 45px;" ng-repeat="contact in contacts | filter: searchTxt" ng-model="contact.checked">
            <!-- <div style="padding: 0px 0px 0px 45px;" ng-repeat="contact in contacts | filter: searchTxt"> -->
                <div class = "row">
                    <div class="col-60 col-center">{{contact.displayName}} </div>
                    <div class="col-40">{{contact.number}} </div>
                </div>
            <!-- </div> -->
            </ion-checkbox>
        </div vs-repeat>

I have 1000 contacts in my test. I notice that with above code it loads only 69 contacts (scrolled to the bottom of the view - 931 contacts don't show up). If I remove the style="padding: 0px 0px 0px 45px" for ionic-checkbox then it loads 133 contacts (867 contacts don't show). If I comment out the ionic-checkbox tags and uncomment the corresponding div tags (currently commented in the code above) then all the 1000 contacts show up - can scroll to the last one.

Also, even with either 69 or 133 contacts showing with ionic-checkbox, when I search for the "missing" contacts, the search works across all the contacts from all 1000 of them and is not constrained to just the 69 or 133.

So the question is why are a chunk of contacts hidden away when I use the ionic-checkbox tag/directive instead of the div tag? I need to use the ionic-checkbox for the checkbox functionality.

Thanks for any help.

-S