Use AngularJS nested ng-repeat to create elements

Question

I am working with angularjs ng-repeat. I have this code:

angular.module('app', [])
  .controller('MainCtrl', function($scope) {
    var items = [1,2,3,4,5,6,7];
    $scope.items = items;
  });

I want to have html result like this:

<ul>
  <li>
    <a href="">1</a>
    <a href="">2</a>
  </li>
  <li>
    <a href="">3</a>
    <a href="">4</a>
  </li>
  <li>
    <a href="">5</a>
    <a href="">6</a>
  </li>
  <li>
    <a href="">7</a>
  </li>
</ul>

The li element needs to be automatically generated as well. I have tried to use ng-repeat, but I am having difficulty with nested ng-repeat.

Please include your most promising attempt, including the ng-repeat. It's very helpful for us to see what you've tried. It allows us to better understand the exact problems you're running into. — ryanyuyu
– ryanyuyu, Commented Jun 12, 2015 at 20:44
you can use $index inside of ng-repeat to get the iterator offset. You could probably use that in combination with the mod % operator to build that HTML — Brian Glaz
– Brian Glaz, Commented Jun 12, 2015 at 20:46
While $index is an option, I prefer keeping this kind of logic in the angular controller (javascript). I'd turn the array into an array of pairs first, then ng-repeat on that array of pairs. — ryanyuyu
– ryanyuyu, Commented Jun 12, 2015 at 20:49
@Brian Glaz Thanks. Could you tell me more about creating the offset, I think this is exactly what I want to achieve. — user2914136
– user2914136, Commented Jun 12, 2015 at 21:06

Aleksandar Gajic · Accepted Answer · 2015-06-13 07:37:01Z

2

You need to split you array in multiple arrays

items = [[1,2], [3,4], [5,6], [7]];

And this new array you can bind to html

<ul>
    <li ng-repeat="li in items"> 
        <a href="" ng-repeat="atags in li">{{atags}}</a>
    </li>
</ul>

I've created you jsfiddle take a look: http://jsfiddle.net/k65wmddL/

answered Jun 13, 2015 at 7:37

Aleksandar Gajic

1,3591 gold badge18 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

Use AngularJS nested ng-repeat to create elements

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related