Advanced structuring: Surrounding ngRepeated items Angular.js

Question

You have an array of objects you're iterating over, How would you surround every (x) elements with (element)?

If your goal is:

to have an (element) surrounding every 4 ng-repeated elements?

surrounding
  ng-repeated-elem
  ng-repeated-elem
  ng-repeated-elem
  ng-repeated-elem
/
surrounding
  ng-repeated-elem
  ng-repeated-elem
  ng-repeated-elem
  ng-repeated-elem
/

to have an (element) surrounding every 2 groups of 4 ng-repeated elements

complicated
  surrounding
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
  /
  surrounding
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
  /
/
complicated
  surrounding
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
  /
  surrounding
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
  /
/

Normal usage of ng-repeat:

<div ng-controller="ExampleContrller as example" >      
  <div ng-repeat="ex in example.arr">
    <span>{{ex.a}}</span>
    <span>{{ex.b}}</span>
  </div>
</div>

would output:

<div ng-controller="ExampleContrller as example" >      

  <div ng-repeat="ex in example.arr">
    <span>a</span>
    <span>b</span>
  </div>
  <div ng-repeat="ex in example.arr">
    <span>a</span>
    <span>b</span>
  </div>
  <div ng-repeat="ex in example.arr">
    <span>a</span>
    <span>b</span>
  </div>
  <div ng-repeat="ex in example.arr">
    <span>a</span>
    <span>b</span>
  </div>

</div>

how could you get the ng-repeat to output this:

<div ng-controller="ExampleContrller as example" >      

  <section> <!-- get a section to surround every (x) ng-repeated elements -->

    <div ng-repeat="ex in example.arr">
      <span>a</span>
      <span>b</span>
    </div>
    <div ng-repeat="ex in example.arr">
      <span>a</span>
      <span>b</span>
    </div>

  </section>

  <section>

    <div ng-repeat="ex in example.arr">
      <span>a</span>
      <span>b</span>
    </div>
    <div ng-repeat="ex in example.arr">
      <span>a</span>
      <span>b</span>
    </div>

  </section>

</div>

Austin Greco · Accepted Answer · 2014-10-04 09:17:17Z

2

Here's a way to do it by creating another array with the proper grouping and using two ng-repeat:

$scope.data2 = (function(data, count) {
    var arr = [];
    var len = data.length / count;
    for (var i=0 ; i<len ; i++) {
        arr.push(data.slice(i*count, (i+1)*count));
    }
    return arr;
})($scope.data, 3);

-

<section ng-repeat="group in data2">
  <div ng-repeat="item in group">
    <span>{{item.a}}</span>
    <span>{{item.b}}</span>
  </div>
</section>

data is the original array, and count is the number of items in each group
Here's the fiddle: http://jsfiddle.net/a9n1e7w5/2/

There's likely be a better way to do this, but this works.

answered Oct 4, 2014 at 9:17

Austin Greco

33.6k6 gold badges60 silver badges61 bronze badges

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

1 Comment

Andrew Luhring Over a year ago

I literally wrote the same thing without looking at yours only to realize that yours is just a more succinct version of mine.

Andrew Luhring · Accepted Answer · 2014-10-11 19:59:12Z

This is literally the same thing as Austin wrote, he just wrote it better.

http://jsfiddle.net/u4e7dcgv/

<main id="main" class="content column" role="main" ng-controller="GalleryController as gallery">
   <div ng-repeat="row in gallery.rows" class="content row">
    <article ng-repeat="gal in row"  class="post">
        <div class="post-content">{{gal.p}}</div>
    </article>
  </div>
</main>


/**
 * Splits an array of items into smaller arrays within the item.
 * @param   {Array}  - arrayOfItems
 * @param   {Number} - numberOfRows (default is 4)
 * @returns {Array}
 */
function wrapIntoRows(arrayOfItems, numberOfRows) {
    var items = arrayOfItems,
        rows = numberOfRows || 4,
        wrappedDom = [];

    function wrap(arr, num) {
        var surround, notSurrounded, _num = num;

        if (arr.length > _num) {
            surround = arr.slice(0, _num);
            notSurrounded = arr.slice(_num, arr.length);

            wrappedDom.push(surround);
            // loop
            wrap(notSurrounded, _num);
        } else {
            var remainder = _num - arr.length;
            surround = arr;

            for (var i = 0; i < remainder; i++) {
                var emptydiv = document.createElement('div');
                surround.push({});
            }
            wrappedDom.push(surround);
        }
    }

    wrap(items, rows);
    return wrappedDom;
}

var Gallery = angular.module('Gallery', []);

Gallery.controller('GalleryController', function ($scope) {
    var gallery = this,
        ArrayOfData = [
              { p: "value 1" }
            , { p: "value 2" }
            , { p: "value 3"}
            , { p: "value 4"}
            , { p: "value 5"}
            , { p: "value 6"}
        ];
    gallery.rows = wrapIntoRows(ArrayOfData);
    $scope.GalleryController = this;
    return $scope.CompanyController;
});

angular.bootstrap(document.body, [
    "Gallery"
 ]);

Collectives™ on Stack Overflow

Advanced structuring: Surrounding ngRepeated items Angular.js

If your goal is:

to have an (element) surrounding every 4 ng-repeated elements?

to have an (element) surrounding every 2 groups of 4 ng-repeated elements

Normal usage of ng-repeat:

would output:

how could you get the ng-repeat to output this:

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

If your goal is:

to have an (element) surrounding every 4 ng-repeated elements?

to have an (element) surrounding every 2 groups of 4 ng-repeated elements

Normal usage of ng-repeat:

would output:

how could you get the ng-repeat to output this:

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related