Nested ng-repeat in the same array level

Question

How can I add a "div" after every each 3 repetitions?

This is my array:

[
   client : "name",
   client : "name",
   client : "name",
   client : "name",
   client : "name",
   client : "name",
   client : "name",
   client : "name",
   client : "name",

]

The result expected is:

<div>name</div>
<div>name</div>
<div>name</div>
<div class="clear"></div>
<div>name</div>
<div>name</div>
<div>name</div>
<div class="clear"></div>
<div>name</div>
<div>name</div>
<div>name</div>
<div class="clear"></div>

You can use the ng-switch directive with the $index value of the ng-repeat to display different separator. — jpmorin
– jpmorin, Commented Apr 19, 2013 at 5:07

Caio Cunha · Accepted Answer · 2013-04-19 02:17:11Z

1

Create a filter that splits your array in groups of three and nest the groups.

The filter should be something like this:

app.filter('split', function() {
  return function(target) {
    var splitted = [];

    if (!target) {
      return target;
    }

    for(var i = 0; i < target.length; i += 3) {
      splitted.push(target.slice(i, i+3));
    }

    return splitted;
 }
});

In your controller, just initialize:

$scope.original = [1, 2, 3, 4, 5, 6, 7, 8, 9];

Finally, this is how your HTML should be:

<div ng-repeat="group in original | split">
  <div ng-repeat="item in group">{{item}}</div>
  <div class="clear"></div>
</div>

You can parametrize the group length. This can be achieved by adding a second param to the filter and passing ng-repeat="group in original | split:3".

Not that the original array is not modified. Here is a working Plunker.

edited Apr 19, 2013 at 2:17

answered Apr 19, 2013 at 2:08

Caio Cunha

23.4k6 gold badges81 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Flo Schild · Accepted Answer · 2013-04-19 00:08:46Z

1

Why not split your initial array ?

[
    [
        client : "name",
        client : "name",
        client : "name"
    ],
    [
        client : "name",
        client : "name",
        client : "name"
    ],
    [
        client : "name",
        client : "name",
        client : "name"
    ]
]

answered Apr 19, 2013 at 0:08

Flo Schild

5,3144 gold badges45 silver badges56 bronze badges

4 Comments

Ignacio Correia Over a year ago

Because I cant change the API :) Good thinking but I really need the array untouched.

Ignacio Correia Over a year ago

I am searching something more like this, but don't know the correct way of using it and also cant make it work with my structure -> jsfiddle.net/4LhN9/46

Flo Schild Over a year ago

What cannot you change in your API ? If you get an array from your API, you still can modify it before to send it to your view, cannot you ?

Ignacio Correia Over a year ago

I am receving all the clients form a Standard web api external to my power of chaging it.

Rajkamal Subramanian · Accepted Answer · 2013-04-19 02:51:32Z

1

One solution to this can be to use the $index angular variable inside the loop as in this plunker. http://plnkr.co/edit/ycnPtBLmbtV8hwIFTsGd?p=preview

Moreover, the data you have posted is not a valid array or valid json. i'm assuming that you are having to deal with json. If you meant an array, the same $index method can be used for the array also.

answered Apr 19, 2013 at 2:51

Rajkamal Subramanian

6,9646 gold badges56 silver badges71 bronze badges

2 Comments

Ignacio Correia Over a year ago

I think CaioToOn solution is better becouse I don't want to start have coustom code in the HTML files, would you agree with this?

Caio Cunha Over a year ago

Actually, this solution is also quite good. The only downside I see is that the you will have many elements in DOM that will never be shown, and they watches will run in every $apply cycle for nothing (although they're simple). You could change the ng-show for ui-if. But then you would get some extra kbs, dependencies and still the watches and some extra compilation. I'd stick with the filter.

nick · Accepted Answer · 2013-04-19 00:38:11Z

-1

Can you just loop through the array, check if that iteration is divisible by three and insert the extra div?

answered Apr 19, 2013 at 0:38

nick

172 bronze badges

1 Comment

Ignacio Correia Over a year ago

Ask questions bellow my question. This place is for answers.

Collectives™ on Stack Overflow

Nested ng-repeat in the same array level

This is my array:

4 Answers 4

Comments

4 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

This is my array:

4 Answers 4

Comments

4 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related