Elevated structuring: Encompassing ngRepeated elements within Angular.js

Question

Elevated structuring: Encompassing ngRepeated elements within Angular.js

You are working with an array of objects and need to apply a specific structure to every set of elements during iteration

If you want:

Each (element) to wrap around every 4 consecutive ng-repeated elements

wrap
  ng-repeated-element
  ng-repeated-element
  ng-repeated-element
  ng-repeated-element
/
wrap
  ng-repeated-element
  ng-repeated-element
  ng-repeated-element
  ng-repeated-element
/

Every 2 groups of 4 ng-repeated elements to be enclosed by the same (element)

complex
  wrap
    ng-repeated-element
    ng-repeated-element
    ng-repeated-element
    ng-repeated-element
  /
  wrap
    ng-repeated-element
    ng-repeated-element
    ng-repeated-element
    ng-repeated-element
  /
/
complex
  wrap
    ng-repeated-element
    ng-repeated-element
    ng-repeated-element
    ng-repeated-element
  /
  wrap
    ng-repeated-element
    ng-repeated-element
    ng-repeated-element
    ng-repeated-element
  /
/

Regular use of ng-repeat:

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

will display:

<div ng-controller="ExampleController 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 can you modify the ng-repeat to achieve this output:

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

  <section> <!-- wrap each set of (x) ng-repeated elements within a 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>

  <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>

javascript angularjs recursion angularjs-ng-repeat

Answer 1

Answer №1

If you want to group data in a specific way, one approach is to create a new array with the desired grouping and utilize two ng-repeat directives:

$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>

In this setup, data represents the initial array, while count specifies the number of items in each group.
You can view the implementation on this fiddle: http://jsfiddle.net/a9n1e7w5/2/

While there may be alternative methods to achieve this, the provided solution effectively accomplishes the task.

Answer 2

If you want to group data in a specific way, one approach is to create a new array with the desired grouping and utilize two ng-repeat directives:

$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>

In this setup, data represents the initial array, while count specifies the number of items in each group.
You can view the implementation on this fiddle: http://jsfiddle.net/a9n1e7w5/2/

While there may be alternative methods to achieve this, the provided solution effectively accomplishes the task.

Answer 3

Answer №2

This is practically identical to Austin's version, just presented more eloquently.

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>


/**
 * Divides an array of elements into smaller arrays within the element.
 * @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"
 ]);

Answer 4

This is practically identical to Austin's version, just presented more eloquently.

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>


/**
 * Divides an array of elements into smaller arrays within the element.
 * @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"
 ]);

Elevated structuring: Encompassing ngRepeated elements within Angular.js

If you want:

Each (element) to wrap around every 4 consecutive ng-repeated elements

Every 2 groups of 4 ng-repeated elements to be enclosed by the same (element)

Regular use of ng-repeat:

will display:

How can you modify the ng-repeat to achieve this output:

Answer №1

Answer №2

Similar questions

Error: The function user.comparePassword does not exist or is not defined

Tips for preventing circular dependencies in JavaScript/TypeScript

Integrating Amazon external images in NextJS

The installation of the Java package via npm failed with the error message: "Unable to access include file: 'jni.h'. File or directory not found."

Unable to trigger onclick event for creating a new title

A more efficient method for creating a nested array of distinct values using JavaScript

Issue with React.js: The formData is empty when trying to add a value from a file using material-ui-dropzone

What is the process for establishing a reference to a property of an object in JavaScript?

I require limitless onclick functionality, but unfortunately, transitions are not functioning as expected

Exploring the Printing Options in Opera using ASP.NET

Utilizing async/await in React Redux for geolocation functionality

Display the LOADING indicator until the entire page has finished loading

Child component in VueJs is undergoing a situation where the variable is found to be

Steps to access arrays that are embedded in a file and are loaded asynchronously

Mastering the art of dynamically chaining methods in JavaScript

JasmineJS: manipulating the DOM to achieve the desired outcome

Executing a Javascript button click in Selenium without an ID using Java

Can sound be triggered from a JS file within Django's HTML template without using Ajax?

What is the best way to update my real-time search results by clicking on the clear button inside the search input field using JavaScript?

Retrieve the ActiveTabIndex value from an Ajax TabContainer using Javascript