Ways to create different sections for ng-repeat data in AngularJS

Question

Ways to create different sections for ng-repeat data in AngularJS

I have a list of data elements that I am displaying using ng-repeat which currently prints as follows:

data1
data2
data3
data4
data5
data6

However, I would like to display these data elements in sections, like this:

data1    data3    data5
data2    data4    data6

Is it achievable in AngularJS?

javascript angularjs

Answer 1

Answer №1

This feature is a CSS trick that eliminates the need for any Angular code. Simply place your ng-repeat directive within <li> elements nested inside a <ul> element, and apply a style to the <ul> tag with columns: 3. This will fulfill your requirement effortlessly.

Illustration

<ul style="columns:3">
    <li ng-repeat="item in items">{{item}}</li>
</ul>

Answer 2

This feature is a CSS trick that eliminates the need for any Angular code. Simply place your ng-repeat directive within <li> elements nested inside a <ul> element, and apply a style to the <ul> tag with columns: 3. This will fulfill your requirement effortlessly.

Illustration

<ul style="columns:3">
    <li ng-repeat="item in items">{{item}}</li>
</ul>

Answer 3

Answer №2

There are various methods to accomplish this goal.

Implementing a 3-column structure is one approach, where the content wraps to the next line after every third value.
Alternatively, you can incorporate this functionality directly in your code by utilizing an ng-if directive on the "br" tag when $index%3 == 2.

Answer 4

There are various methods to accomplish this goal.

Implementing a 3-column structure is one approach, where the content wraps to the next line after every third value.
Alternatively, you can incorporate this functionality directly in your code by utilizing an ng-if directive on the "br" tag when $index%3 == 2.

Answer 5

Answer №3

A possible way to structure data like that is by formatting the array into a 2D array for easier looping. You can refer to the Custom Example for reference.

To achieve this, you can create a filter to format your array data:

// Custom filter to loop through every n items
App.filter("customLoop", [function() {
  return function(mainArray, loopEvery) {
    var subArray = [], formattedArray = [];
    angular.forEach(mainArray, function(item, index) {
      subArray.push(item);
      if ((subArray.length == loopEvery) || (index == mainArray.length - 1)) {
        formattedArray.push(subArray);
        subArray = [];
      }
    });
    return formattedArray;
  }
}]);

Answer 6

A possible way to structure data like that is by formatting the array into a 2D array for easier looping. You can refer to the Custom Example for reference.

To achieve this, you can create a filter to format your array data:

// Custom filter to loop through every n items
App.filter("customLoop", [function() {
  return function(mainArray, loopEvery) {
    var subArray = [], formattedArray = [];
    angular.forEach(mainArray, function(item, index) {
      subArray.push(item);
      if ((subArray.length == loopEvery) || (index == mainArray.length - 1)) {
        formattedArray.push(subArray);
        subArray = [];
      }
    });
    return formattedArray;
  }
}]);

Ways to create different sections for ng-repeat data in AngularJS

Answer №1

Illustration

Answer №2

Answer №3

Similar questions

MongooseError: The operation `users.findOne()` has encountered an issue

The ng-table grouping feature fails to function properly when identical data is retrieved from a REST service and assigned

configuring conditions for protractor end-to-end tests

Is the JSON data not matching the file's content during validation?

The best way to avoid routing before certain async data in the Vuex store has finished loading

Creating a scrollable div in Electron

Angular: The most efficient method for creating a customized HTML page with unique styles specifically for PDF generation

JavaScript TypeError - missing method issue

Utilizing Sequelize to Convert and Cast Data in iLike Queries

Tips for showing a DialogBox when a blur event occurs and avoiding the re-firing of onBlur when using the DialogBox

Is there a way to modify the starting position of my shapes in Three.js?

Filter input in jQuery for a textarea box

Function for swapping out the alert message

Encountering issues with fs.writeFile function in a freshly set up Vue project

Display a div when hovering over another div

Utilize Jquery to transfer a JSON API Request element to an array

Is it possible to convert an object with properties of equal length into a list of objects using JavaScript?

Develop a professional Angular application for deployment

Arrangement of HTML file script and CSS styling

Inserting items into a JSON array