Limiting number of displayed results when using ngRepeat

Question

I find the AngularJS tutorials hard to understand  this one is walking me through building an app that displays phones  I   m on step 5 and I thought as an experiment I   d try to allow users to specify how many they   d like to be shown  The view looks like this    lt body ng-controller  PhoneListCtrl  gt      lt div class  container-fluid  gt       lt div class  row-fluid  gt         lt div class  span2  gt           lt  --Sidebar content-- gt           Search   lt input ng-model  query  gt          How Many   lt input ng-model  quantity  gt          Sort by           lt select ng-model  orderProp  gt             lt option value  name  gt Alphabetical lt  option gt             lt option value  age  gt Newest lt  option gt           lt  select gt          lt  div gt         lt div class  span10  gt           lt  --Body content-- gt            lt ul class  phones  gt             lt li ng-repeat  phone in phones   filter query   orderBy orderProp  gt                phone name                lt p gt   phone snippet   lt  p gt             lt  li gt           lt  ul gt          lt  div gt       lt  div gt     lt  div gt   lt  body gt    I   ve added this line where users can enter how many results they want shown   How Many   lt input ng-model  quantity  gt    Here   s my controller   function PhoneListCtrl  scope   http       http get  phones phones json   success function data         scope phones   data splice 0   quantity              scope orderProp    age      scope quantity   5      The important line is    scope phones   data splice 0   quantity      I can hard-code in a number to represent how many phones should be shown  If I put 5 in  5 will be shown  All I want to do is read the number in that input from the view  and put that in the data splice line  I   ve tried with and without quotes  and neither work  How do I do this

User · Answer

Another  and I think better  way to achieve this is to actually intercept the data  limitTo is okay but what if you re limiting to 10 when your array actually contains thousands   When calling my service I simply did this   TaskService getTasks function data        scope tasks   data slice 0 10         This limits what is sent to the view  so should be much better for performance than doing this on the front-end

User · Answer

A little late to the party  but this worked for me  Hopefully someone else finds it useful      lt div ng-repeat  video in videos  ng-if   index  lt  3  gt           lt  div gt

User · Answer

Use limitTo filter to display a limited number of results in ng-repeat    lt ul class  phones  gt         lt li ng-repeat  phone in phones   limitTo 5  gt            phone name            lt p gt   phone snippet   lt  p gt         lt  li gt   lt  ul gt

User · Answer

Slightly more  Angular way  would be to use the straightforward limitTo filter  as natively provided by Angular    lt ul class  phones  gt     lt li ng-repeat  phone in phones   filter query   orderBy orderProp   limitTo quantity  gt        phone name        lt p gt   phone snippet   lt  p gt     lt  li gt   lt  ul gt    app controller  PhoneListCtrl   function  scope   http         http get  phones json   then        function phones            scope phones   phones data                      scope orderProp    age        scope quantity   5           PLUNKER

User · Answer

store all your data initially  function PhoneListCtrl  scope   http       http get  phones phones json   success function data         scope phones   data splice 0  5        scope allPhones   data            scope orderProp    age      scope howMany   5      then here watch the howMany variable on the scope and update the phones array accordingly    scope  watch  howMany   function newValue  oldValue        scope phones    scope allPhones splice 0 newValue            EDIT had accidentally put the watch outside the controller it should have been inside

User · Answer

This works better in my case if you have object or multi-dimensional array  It will shows only first items  other will be just ignored in loop    filter  limitItems   function        return function  items        var result       i   1      angular forEach items  function value  key          if  i  lt  5            result key    value                i   i   1              return result             Change 5 on what you want

User · Answer

here is anaother way to limit your filter on html  for example I want to display 3 list at time than i will use limitTo 3     lt li ng-repeat  phone in phones   limitTo 3  gt       lt p gt Phone Name    phone name   lt  p gt     lt  li gt

[javascript] Limiting number of displayed results when using ngRepeat

Examples related to javascript

Examples related to model-view-controller

Examples related to angularjs

Examples related to scope