{"id":5981,"date":"2013-11-11T15:29:40","date_gmt":"2013-11-11T23:29:40","guid":{"rendered":"http:\/\/www.seedcode.com\/?p=5981"},"modified":"2013-11-11T15:29:40","modified_gmt":"2013-11-11T23:29:40","slug":"angularjs-limitto","status":"publish","type":"post","link":"https:\/\/seedcode.com\/angularjs-limitto\/","title":{"rendered":"AngularJS: LimitTo"},"content":{"rendered":"

Parameter order matters in ng-repeat<\/h3>\n

While building our new timeline app, speed has always been tricky; even if we are trying to show 1k events at once over a span of several years, we hope the app will feel responsive. Accordingly, we’re looping through all available events and reserving a space for them in the DOM whether they are visible or not. This can cause some pretty big slowdowns as our event count grows.<\/p>\n

\"Timeline.\"<\/a>
Timeline. Events only rendered as users scroll them into view.<\/figcaption><\/figure><\/div>\n

This all happens within an ng-repeat directive that generates an <li> for each event. We already hide the content of the <li> if it’s out of scroll range but to get faster we needed a way to not even render the <li> element itself while a user’s adjusting the range of visible events. limit<\/p>\n

To to the rescue. I was able to utilize the limitTo filter and only render enough li\u2019s to fill the screen until the user is done adjusting the range slider. Once they stop adjusting the slider then the limitTo filter changes to show all events. The net effect is when a user is sliding the range slider we limit what we are showing, then when they are done everything shows, speeding up user interaction considerably.<\/p>\n

One problem I thought I had was that it wasn\u2019t sorting before we ran the limitTo filter so it would display different results when changing the slider range. That ended up being an easy fix as I just needed to swap the limitTo filter to go last<\/strong> in the ng-repeat directive.<\/p>\n

\"limitTo<\/a>
limitTo at the end of ng-repeat<\/figcaption><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"

Parameter order matters in ng-repeat While building our new timeline app, speed has always been tricky; even if we are trying to show 1k events at once over a span of several years, we hope the app will feel responsive. Accordingly, we’re looping through all available events and reserving a space for them in the DOM whether they are visible or not. This can cause some pretty big slowdowns as our event count grows. This all happens within an ng-repeat directive that generates an <li> for each event. We already hide the content of the <li> if it’s out of scroll range but to get faster we needed a way to not even render the <li> element itself while a user’s adjusting the range of visible events. limit To to the rescue. I was able to utilize the limitTo filter and only render enough li\u2019s to fill the screen until the user is done adjusting the range slider. Once they stop adjusting the slider then the limitTo filter changes to show all events. The net effect is when a user is sliding the range slider we limit what we are showing, then when they are done everything shows, speeding up user interaction considerably. One problem I thought I had was that it wasn\u2019t sorting before we ran the limitTo filter so it would display different results when changing the slider range. That ended up being an easy fix as I just needed to swap the limitTo filter to go last in the ng-repeat directive.<\/p>\n","protected":false},"author":4,"featured_media":5992,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[23],"class_list":["post-5981","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-javascript"],"yoast_head":"\nAngularJS: LimitTo - SeedCode<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/seedcode.com\/angularjs-limitto\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AngularJS: LimitTo - SeedCode\" \/>\n<meta property=\"og:description\" content=\"Parameter order matters in ng-repeat While building our new timeline app, speed has always been tricky; even if we are trying to show 1k events at once over a span of several years, we hope the app will feel responsive. Accordingly, we’re looping through all available events and reserving a space for them in the DOM whether they are visible or not. This can cause some pretty big slowdowns as our event count grows. This all happens within an ng-repeat directive that generates an <li> for each event. We already hide the content of the <li> if it’s out of scroll range but to get faster we needed a way to not even render the <li> element itself while a user’s adjusting the range of visible events. limit To to the rescue. I was able to utilize the limitTo filter and only render enough li\u2019s to fill the screen until the user is done adjusting the range slider. Once they stop adjusting the slider then the limitTo filter changes to show all events. The net effect is when a user is sliding the range slider we limit what we are showing, then when they are done everything shows, speeding up user interaction considerably. One problem I thought I had was that it wasn\u2019t sorting before we ran the limitTo filter so it would display different results when changing the slider range. That ended up being an easy fix as I just needed to swap the limitTo filter to go last in the ng-repeat directive.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/seedcode.com\/angularjs-limitto\/\" \/>\n<meta property=\"og:site_name\" content=\"SeedCode\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/seedcoder\" \/>\n<meta property=\"article:published_time\" content=\"2013-11-11T23:29:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/seedcode.com\/wp-content\/uploads\/2013\/11\/AngularSpeed.png\" \/>\n\t<meta property=\"og:image:width\" content=\"109\" \/>\n\t<meta property=\"og:image:height\" content=\"110\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"tannerellen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dayback\" \/>\n<meta name=\"twitter:site\" content=\"@dayback\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"tannerellen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/seedcode.com\/angularjs-limitto\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/seedcode.com\/angularjs-limitto\/\"},\"author\":{\"name\":\"tannerellen\",\"@id\":\"https:\/\/seedcode.com\/#\/schema\/person\/23918642ba88df8bb67dc03d11644598\"},\"headline\":\"AngularJS: LimitTo\",\"datePublished\":\"2013-11-11T23:29:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/seedcode.com\/angularjs-limitto\/\"},\"wordCount\":297,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/seedcode.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/seedcode.com\/angularjs-limitto\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2013\/11\/AngularSpeed.png\",\"keywords\":[\"javascript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/seedcode.com\/angularjs-limitto\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/seedcode.com\/angularjs-limitto\/\",\"url\":\"https:\/\/seedcode.com\/angularjs-limitto\/\",\"name\":\"AngularJS: LimitTo - SeedCode\",\"isPartOf\":{\"@id\":\"https:\/\/seedcode.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/seedcode.com\/angularjs-limitto\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/seedcode.com\/angularjs-limitto\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2013\/11\/AngularSpeed.png\",\"datePublished\":\"2013-11-11T23:29:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/seedcode.com\/angularjs-limitto\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/seedcode.com\/angularjs-limitto\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/seedcode.com\/angularjs-limitto\/#primaryimage\",\"url\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2013\/11\/AngularSpeed.png\",\"contentUrl\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2013\/11\/AngularSpeed.png\",\"width\":109,\"height\":110,\"caption\":\"AngularJSSpeed\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/seedcode.com\/angularjs-limitto\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/seedcode.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"AngularJS: LimitTo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/seedcode.com\/#website\",\"url\":\"https:\/\/seedcode.com\/\",\"name\":\"SeedCode\",\"description\":\"Build the Software You've Always Wanted\",\"publisher\":{\"@id\":\"https:\/\/seedcode.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/seedcode.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/seedcode.com\/#organization\",\"name\":\"SeedCode\",\"url\":\"https:\/\/seedcode.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/seedcode.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2022\/12\/SeedCodeLogo.png\",\"contentUrl\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2022\/12\/SeedCodeLogo.png\",\"width\":595,\"height\":189,\"caption\":\"SeedCode\"},\"image\":{\"@id\":\"https:\/\/seedcode.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/seedcoder\",\"https:\/\/x.com\/dayback\",\"https:\/\/www.linkedin.com\/company\/seedcode\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/seedcode.com\/#\/schema\/person\/23918642ba88df8bb67dc03d11644598\",\"name\":\"tannerellen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/seedcode.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"caption\":\"tannerellen\"},\"url\":\"https:\/\/seedcode.com\/author\/tannerellen\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AngularJS: LimitTo - SeedCode","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/seedcode.com\/angularjs-limitto\/","og_locale":"en_US","og_type":"article","og_title":"AngularJS: LimitTo - SeedCode","og_description":"Parameter order matters in ng-repeat While building our new timeline app, speed has always been tricky; even if we are trying to show 1k events at once over a span of several years, we hope the app will feel responsive. Accordingly, we’re looping through all available events and reserving a space for them in the DOM whether they are visible or not. This can cause some pretty big slowdowns as our event count grows. This all happens within an ng-repeat directive that generates an <li> for each event. We already hide the content of the <li> if it’s out of scroll range but to get faster we needed a way to not even render the <li> element itself while a user’s adjusting the range of visible events. limit To to the rescue. I was able to utilize the limitTo filter and only render enough li\u2019s to fill the screen until the user is done adjusting the range slider. Once they stop adjusting the slider then the limitTo filter changes to show all events. The net effect is when a user is sliding the range slider we limit what we are showing, then when they are done everything shows, speeding up user interaction considerably. One problem I thought I had was that it wasn\u2019t sorting before we ran the limitTo filter so it would display different results when changing the slider range. That ended up being an easy fix as I just needed to swap the limitTo filter to go last in the ng-repeat directive.","og_url":"https:\/\/seedcode.com\/angularjs-limitto\/","og_site_name":"SeedCode","article_publisher":"https:\/\/www.facebook.com\/seedcoder","article_published_time":"2013-11-11T23:29:40+00:00","og_image":[{"width":109,"height":110,"url":"https:\/\/seedcode.com\/wp-content\/uploads\/2013\/11\/AngularSpeed.png","type":"image\/png"}],"author":"tannerellen","twitter_card":"summary_large_image","twitter_creator":"@dayback","twitter_site":"@dayback","twitter_misc":{"Written by":"tannerellen","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/seedcode.com\/angularjs-limitto\/#article","isPartOf":{"@id":"https:\/\/seedcode.com\/angularjs-limitto\/"},"author":{"name":"tannerellen","@id":"https:\/\/seedcode.com\/#\/schema\/person\/23918642ba88df8bb67dc03d11644598"},"headline":"AngularJS: LimitTo","datePublished":"2013-11-11T23:29:40+00:00","mainEntityOfPage":{"@id":"https:\/\/seedcode.com\/angularjs-limitto\/"},"wordCount":297,"commentCount":0,"publisher":{"@id":"https:\/\/seedcode.com\/#organization"},"image":{"@id":"https:\/\/seedcode.com\/angularjs-limitto\/#primaryimage"},"thumbnailUrl":"https:\/\/seedcode.com\/wp-content\/uploads\/2013\/11\/AngularSpeed.png","keywords":["javascript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/seedcode.com\/angularjs-limitto\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/seedcode.com\/angularjs-limitto\/","url":"https:\/\/seedcode.com\/angularjs-limitto\/","name":"AngularJS: LimitTo - SeedCode","isPartOf":{"@id":"https:\/\/seedcode.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/seedcode.com\/angularjs-limitto\/#primaryimage"},"image":{"@id":"https:\/\/seedcode.com\/angularjs-limitto\/#primaryimage"},"thumbnailUrl":"https:\/\/seedcode.com\/wp-content\/uploads\/2013\/11\/AngularSpeed.png","datePublished":"2013-11-11T23:29:40+00:00","breadcrumb":{"@id":"https:\/\/seedcode.com\/angularjs-limitto\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/seedcode.com\/angularjs-limitto\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/seedcode.com\/angularjs-limitto\/#primaryimage","url":"https:\/\/seedcode.com\/wp-content\/uploads\/2013\/11\/AngularSpeed.png","contentUrl":"https:\/\/seedcode.com\/wp-content\/uploads\/2013\/11\/AngularSpeed.png","width":109,"height":110,"caption":"AngularJSSpeed"},{"@type":"BreadcrumbList","@id":"https:\/\/seedcode.com\/angularjs-limitto\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/seedcode.com\/"},{"@type":"ListItem","position":2,"name":"AngularJS: LimitTo"}]},{"@type":"WebSite","@id":"https:\/\/seedcode.com\/#website","url":"https:\/\/seedcode.com\/","name":"SeedCode","description":"Build the Software You've Always Wanted","publisher":{"@id":"https:\/\/seedcode.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/seedcode.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/seedcode.com\/#organization","name":"SeedCode","url":"https:\/\/seedcode.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/seedcode.com\/#\/schema\/logo\/image\/","url":"https:\/\/seedcode.com\/wp-content\/uploads\/2022\/12\/SeedCodeLogo.png","contentUrl":"https:\/\/seedcode.com\/wp-content\/uploads\/2022\/12\/SeedCodeLogo.png","width":595,"height":189,"caption":"SeedCode"},"image":{"@id":"https:\/\/seedcode.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/seedcoder","https:\/\/x.com\/dayback","https:\/\/www.linkedin.com\/company\/seedcode\/"]},{"@type":"Person","@id":"https:\/\/seedcode.com\/#\/schema\/person\/23918642ba88df8bb67dc03d11644598","name":"tannerellen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/seedcode.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","caption":"tannerellen"},"url":"https:\/\/seedcode.com\/author\/tannerellen\/"}]}},"_links":{"self":[{"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/posts\/5981","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/comments?post=5981"}],"version-history":[{"count":0,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/posts\/5981\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/media\/5992"}],"wp:attachment":[{"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/media?parent=5981"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/categories?post=5981"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/tags?post=5981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}