Performance Tuning Angularjs ng-repeat for large lists -
i have angularjs directive have written acts form select component. has search field search through choices. when click on choice removes choice list of choices , displays it, above search field, selection. when click on selection removes selections, above search field, , places in choices list.
i have done lot of research on ng-repeat , it's potential performance issues, have seen. in current iteration using bindonce, limitto , track by, , infinite scroll. on laptop directive fast, on iphone 5, still fast, on iphone 4 pretty fast , on iphone 3 junk. on iphone 3 text search filtering through choices fast, selecting choice or selection slow.
here ng-repeat using choices:
<a bindonce refresh-on="'refreshselect'" ng-repeat="choice in choices | filter:{name: searchfilter.name, selected: false}:strict | orderby:'name' | limitto: limitnumberofchoices track choice.id" ng-click="addtoselections(choice)"> <div class="well well-sm" style="margin-bottom:10px;"> <strong> <span bo-bind="choice.name"></span> <span class="badge" ng-show="choice.badgevalue" bo-bind="choice.badgevalue"></span> </strong> </div> </a>
here ng-repeat using selections:
<a bindonce refresh-on="'refreshselect'" ng-repeat="selection in selections | orderby:'name' track selection.id" ng-click="removefromselections(selection)"> <div class="well well-sm" style="margin-bottom: 10px;"> <strong> <span bo-bind="selection.name"></span> <span class="badge" ng-show="selection.badgevalue" bo-bind="selection.badgevalue"></span> </strong> </div> </a>
a plunker of directive @ http://plnkr.co/edit/ziqstcbhxsmyipnnetur?p=preview
choices below input field. selections above input field. can scroll through choices. infinitescroll fire when have scrolled 75% down list of choices. add 50 limitto in ng-repeat. choices array 10000 items large.
i need suggestions on how speed directive up. unfortunately have large number of iphone 3s, getting rid of them not option. doing real simple slowing down.
thanks in advance
warren
updated
i took off orderby on ng-repeat choices list. choices large list 10000 records. increased speed bit still slow on iphone 3.
Comments
Post a Comment