ng-repeat and array chunk

920 views
Skip to first unread message

Aimery Marsily

unread,
Mar 13, 2015, 12:16:32 PM3/13/15
to ang...@googlegroups.com
Hi !

I need to iterate through an array of 50 values with ng-repeat but I need to iterate on every 4 values grouped. My aim is to have something like :
<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>
<div>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
</div>

So for that I need to nest 2 ng-repeats. In PHP I'll use foreach (array_chunk($array->datas, 4) as $i => $datas) and then an other foreach on the $datas. But in AngularJS I realy don't know how to do so. Any ideas ?

Here is a basic plunker to work with : http://plnkr.co/edit/FfisnfVYhiahBxGARdgN?p=preview

Thanks

Caue Alves

unread,
Mar 13, 2015, 5:53:04 PM3/13/15
to ang...@googlegroups.com
Hello Aimery, how are you?

So to make a group without an index to make the filter, eg we will group by category (dogs, cats, horses) I made an example of code to use the way you quoted above:

myApp.controller('MainController', function($scope) {
  $scope.values = [1,2,3,4,5,6,7,8,9,10];
  $scope.grouped =  [];
  
  var i,t, j = $scope.values.length, chunk = 4;
  
  for ( i = 0; i < j; i+=chunk ) {
      $scope.grouped.push($scope.values.slice(i,i+chunk));
  }
});

And can display as follows:

<body ng-app="myApp" ng-controller="MainController">
    <div class="group">
      <span ng-repeat="(key,value) in grouped">
        <div>
            <span ng-repeat="(key,each) in value">
              {{ each }}
            </span>
        </div>
      </span>
     </div>
  </body>

But I suggest you return a server object already with the categories to which they belong, for example:

$scope.animals = [
   {name: 'Mia', category: 'cat'},
   {name: 'Bugg', category: 'dog'},
   {name: 'Kit', category: 'dog'},
   {name: 'Kie', category: 'cat'},
   {name: 'Mon', category: 'dog'}
];

With this, you can use an angular filter called groupBy, example:

<span ng-repeat="(key, value) in animals | groupBy: 'category'">
  Category: {{ key }}
  <li ng-repeat="animal in value">
    Animal Name: {{ animal.name }} 
  </li>
</span>



--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Aimery Marsily

unread,
Mar 13, 2015, 6:45:37 PM3/13/15
to ang...@googlegroups.com
Hi,

Sorry but I think your answer is not what I was hoping for... As I said I want to iterate through the values with ng-repeat (a filter is a good idea) but I can't group them at all. Have a look at the Plunker it's only values from an array that i want to chunk every 4 values. About your first suggestion, it's what I'm doing right now, doing a chunk in the controller and then give it to the view. But I was hoping to find a simple chunk filter that could be apply on arrays. Maybe I should just code one based on the groupby filter from a8m.

Thanks for the tips ;-)

Sander Elias

unread,
Mar 14, 2015, 2:19:23 AM3/14/15
to ang...@googlegroups.com
Hi Aimery,

What is your goal? Do you want to display it like a grid? If it for visuals, you better solve it with CSS. (as I did in the linked sample)
if you really want inserted elements, use a couple of helper array's like I did in the same plunk
If you really want a chucked array, I posted a couple of solutions for that long ago. However, be aware that there are performance penalties for that.

Regards
Sander
 

Johannes Schneider

unread,
Mar 19, 2015, 4:51:36 AM3/19/15
to ang...@googlegroups.com
Hey,

maybe you can use the index variable coming with ng-repeat to build something similar to your example.
I think about something like
</div ng-if="index % 4 == 0">
<div ng-if="index % 4 == 0">

this would add the breaking divs after every 4th element. the problem is they are inside the element with the ng-repeat directive.

I hope this helps anyway. bg,
Johannes



</div>
--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

-- 
--
Mit freundlichen Grüßen

Johannes Schneider
Front-End-Entwickler

Philippka-Sportverlag  
Rektoratsweg 36
48159 Münster

Tel.: 0251/23 005-27
Fax: 0251/23 005-79

www.philippka.de
Philippka-Sportverlag GmbH & Co. KG - AG Münster HRA 9751
Persönl. haftende Gesellschafterin: Philippka Verwaltungs-GmbH
AG Münster HRB 14729 - Geschäftsführer: Ferdinand Honig, Thorsten Krybus
Reply all
Reply to author
Forward
0 new messages