1

This it my objects with arrays: 

01-543BY: Array[1]
03-45BD23: Array[1]
03-67BS50: Array[1]
06-78FR90: Array[1]
07-467BY3: Array[1]
09-23DF76: Array[1]

Currently I have six, but I only want to show 4. This is my ng-repeat:

<div ng-repeat="(key, item) in product.productListByCategoriesShow ">

I tried <div ng-repeat="(key, item) in product.productListByCategoriesShow |limitTo: 4 "> But it seems not working. Any suggestions? Thx

Pickles
  • 243
  • 2
  • 3
  • 14
  • possible duplicate of [Using ng-repeat and limitTo to limit the number of visible items displayed](http://stackoverflow.com/questions/19601028/using-ng-repeat-and-limitto-to-limit-the-number-of-visible-items-displayed) – Vintesh Aug 28 '15 at 04:22

7 Answers7

2

I'd use this helper filter for a situation like this:

module.filter('keys', [
    function () {
        return function (object) {
            return Object.keys(object);
        }
    }
]);

And then use it like:

<div ng-repeat="key in product.productListByCategoriesShow | keys | limitTo: 4" 
     ng-init="item = product.productListByCategoriesShow[key]">
     ...
</div>

Demo:

http://plnkr.co/edit/5edaa8qScyhseB0B1Z9o?p=preview

I'd recommend sorting the keys using filter to guarantee order, as well, before calling limitTo. I'm guessing that the angular team didn't make limitTo work on objects because the order would potentially be volatile?

Jesus is Lord
  • 14,971
  • 11
  • 66
  • 97
0

limitTo: {{size you want}} filter will help you in showing the number of element in list you want to display. Check this doc : https://docs.angularjs.org/api/ng/filter/limitTo

Mahaveer Jain
  • 31
  • 9
  • @Tushar can you able to iterate this list using ng-repeat? because i fine the data structure for it is not a array. – Mahaveer Jain Aug 28 '15 at 05:01
  • Read the last sentence in the question _I tried
    But it seems not working. Any suggestions? Thx_
     – Tushar Aug 28 '15 at 05:02
  • @Tushar Yeah i have read it what i want know before getting to any solution are you able to iterate it without using limitTo : 4 . all 6 are getting displayed when you use ng-repeat on them ? – Mahaveer Jain Aug 28 '15 at 05:05
  • @Tushar, Im not able to use limitTo for objects, only arrays and string. Currently my data are all objects, so what i did was put them inside an array...which then lets me use limitTo. That is my solution, thx for the help tho – Pickles Aug 28 '15 at 06:51
0

You mention that you've tried

<div ng-repeat="(key, item) in product.productListByCategoriesShow | limitTo: 4 ">

My concern would be that product.productListByCategoriesShow is the array you want to apply the filter to, but angular might be trying to apply the filter to your entire 'in' statement. Have you tried:

<div ng-repeat="(key, item) in (product.productListByCategoriesShow | limitTo: 4)">

ScottyMJacobson
  • 21
  • 3
  • yea i have tried. Im not too sure if limitTo works for objects, ive only seen examples of arrays and strings so far.... – Pickles Aug 28 '15 at 04:33
0

Not best solution:

<div ng-repeat="(key, item) in product.productListByCategoriesShow" ng-if="$index < 4"></div>
user3335966
  • 2,673
  • 4
  • 30
  • 33
0

Why not limit the array in the controller?

$scope.product.productListByCategoriesShow.length = 4
user12121234
  • 2,519
  • 2
  • 25
  • 27
0

I'vs solved my problem.

limitTo, does not work for objects, only arrays and string, so what I id was to place my object into sets of arrays.

So instead of this: 

01-543BY: Array[1]
03-45BD23: Array[1]
03-67BS50: Array[1]
06-78FR90: Array[1]
07-467BY3: Array[1]
09-23DF76: Array[1]

I did this: [Array[1], Array[1], Array[1], Array[1], Array[1], Array[1]] using the angular.foreach and .push(only works for arrays) it to an array.

So now my myarray | limitTo:4 works perfectly.

Pickles
  • 243
  • 2
  • 3
  • 14
0

if you want to track according to key you should use like this;

<div ng-repeat="item in product.productListByCategoriesShow |limitTo: 4 track by $key ">
nolines
  • 150
  • 1
  • 15