Creating a horizontal grid with a set number of rows using ng-repeat

Question

Creating a horizontal grid with a set number of rows using ng-repeat

I'm facing a challenge where I need to showcase a set of text objects stored in an array within a grid format. I am utilizing the Ionic framework for this purpose.

Here are the specifications for the grid:

It should have a fixed height
Consist of exactly 3 rows
Enable horizontal scrolling (infinite columns)
Show 2 columns on screens narrower than 768px (phones) and 4 columns on screens 768px and wider (tablets)

I have already defined the media query for column widths and included for implementing horizontal scroll functionality.

The main question is how can I utilize ng-repeat (possibly with ngif ??) to construct the grid, starting from the first column and filling it with 3 rows before proceeding to the next column, and so on?

JS

var items = [
{text: "This is item1"},
{text: "This is item2"},
{text: "This is item3"},
.
.
.
]

CSS:

.myGridRow {
  height: 40%;
 }
 .myGridCol {
   width: 50%;
 }
 @media only screen and (min-width : 768px) {
   .myGridCol {
     width: 25%;
   }
 }

HTML

<ion-scroll direction="x">
 <div class="row myGridRow"> <!-- The single container for the whole grid -->

  <div ng-repeat="item in items"> <!-- Repeat this process 3 times before moving to the next row -->
   <div class="row"><div class="col myGridCol">{{item.text}}</div></div>
  </div>

</div>
</ion-scroll>

Desired Output

I'm currently stuck at determining the approach to switching to the next column after every 3 rows or confirming if this method aligns with the intended outcome.

javascript angularjs ionic-framework

Answer 1

Answer №1

ng-repeat is limited to looping through a collection and cannot handle an integer as input. However, you can create a placeholder collection to determine the number of repetitions needed:

$scope.items = [/* The base collection */];
$scope.iterCount = 3; // Number of iterations before a new row is created
$scope.itemCount = Math.floor($scope.items.length / $scope.iterCount);

// Fetch a collection of items equally spaced from one another. For instance: getSpacedItems([1, 2, 3, 4], 0, 2) == [1, 3]
$scope.getSpacedItems = function(collection, start, space) {
  var subColl = [];
  for(var i = start; i < collection.length; i += space) {
    result.push(collection[i]);
  }

  return result;
};

You can then apply these values in the view like this:

<div>
  <div class="row" ng-repeat="n in [0, 1, 2] track by $index">
    <div class="col myGridCol" ng-repeat="item in getSpacedItems(items, $index, iterCount)">{{item.text}}</div>
  </div>
</div>

Answer 2

ng-repeat is limited to looping through a collection and cannot handle an integer as input. However, you can create a placeholder collection to determine the number of repetitions needed:

$scope.items = [/* The base collection */];
$scope.iterCount = 3; // Number of iterations before a new row is created
$scope.itemCount = Math.floor($scope.items.length / $scope.iterCount);

// Fetch a collection of items equally spaced from one another. For instance: getSpacedItems([1, 2, 3, 4], 0, 2) == [1, 3]
$scope.getSpacedItems = function(collection, start, space) {
  var subColl = [];
  for(var i = start; i < collection.length; i += space) {
    result.push(collection[i]);
  }

  return result;
};

You can then apply these values in the view like this:

<div>
  <div class="row" ng-repeat="n in [0, 1, 2] track by $index">
    <div class="col myGridCol" ng-repeat="item in getSpacedItems(items, $index, iterCount)">{{item.text}}</div>
  </div>
</div>

Answer 3

Answer №2

In order to tackle this issue effectively, I recommend transforming the array data on the controller side. By "rotating" your 2D array and switching rows with columns, you can then proceed with standard output procedures. This process is better suited for the controller rather than the view side.

Answer 4

In order to tackle this issue effectively, I recommend transforming the array data on the controller side. By "rotating" your 2D array and switching rows with columns, you can then proceed with standard output procedures. This process is better suited for the controller rather than the view side.

Creating a horizontal grid with a set number of rows using ng-repeat

Answer №1

Answer №2

Similar questions

Identifying IPV6 Private and Loopback Addresses in Node.js: A Guide

What could be the reason for Angular showing the raw HTML code instead of

The issue lies with Mongoose's inability to convert a string into an object key

Web pages that dynamically update without the need for reloading

Troubleshooting: MongoDB/mongoose post save hook does not execute

Steps for assigning a $scope variable from within a different $scope variable

What is the process for configuring CORS in Wamp?

.env file cannot be utilized in JavaScript

I have a vision of creating a unique Countdown Stopwatch that meets all my

Is it possible to form facial features using just the vertices?

Retrieving exclusive npm packages from an npmjs user

Turn on and off jquery tabs depending on user's choice

Click on any checkbox to select all checkboxes at once

The semantic UI form validation I'm implementing uses a regex rule of 'regExp[/(.*[0-9 \-]){23}$/]'. Works perfectly on all devices except for iOS

Exploring differences: map versus concatMap

What is the best way to display the output of my Sudoku generator as an HTML table in Django?

After showcasing every photo in the album, remember to include a line break

What is the best approach to ensure mobile responsiveness and properly space the TV show div?

Blank page shown when routing with Angular in Rails

Guide on adjusting the darkness of a MaterialUI Avatar component image and adding text to it