Creating a table using ng-repeat in AngularJS on a single-level array

Question

Creating a table using ng-repeat in AngularJS on a single-level array

I have a collection of N items:

$scope.collection = ["item 1", "item 2", "item 3" ... ,"item N"]

My goal is to convert this collection into a table with X columns and N/X rows.

Is it feasible to achieve this using the ng-repeat directive?

I am aware that I can restructure the collection like this :

$scope.collection = [["item 1", "item 2", "item 3"], ["item 4", "item 5", "item 6"] ...]

and then utilize nested ng-repeat.

However, I would like to ascertain if maintaining a single-level array is also a viable option.

javascript arrays angularjs angularjs-ng-repeat html-table

Answer 1

Answer №1

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

app.controller('homeCtrl', function($scope) {

  $scope.x = 3;

  $scope.arr = [];

  for (i = 0; i < 100; i++) {
    $scope.arr.push(i);
  }

  $scope.getColumns = function() {

    return new Array($scope.x);

  };

  $scope.getRows = function() {

    return new Array(Math.ceil(($scope.arr.length) / $scope.x));

  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="homeCtrl">
    Columns:
    <input type="number" ng-model="x" />

    <table border="1">
      <tr ng-repeat="i in getRows() track by $index" ng-init="idx = $index">
        <td ng-repeat="c in getColumns() track by $index" ng-init="idy=$index">{{arr[(idx*x)+idy]}}</td>
      </tr>
    </table>

  </div>
</div>

Answer 2

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

app.controller('homeCtrl', function($scope) {

  $scope.x = 3;

  $scope.arr = [];

  for (i = 0; i < 100; i++) {
    $scope.arr.push(i);
  }

  $scope.getColumns = function() {

    return new Array($scope.x);

  };

  $scope.getRows = function() {

    return new Array(Math.ceil(($scope.arr.length) / $scope.x));

  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="homeCtrl">
    Columns:
    <input type="number" ng-model="x" />

    <table border="1">
      <tr ng-repeat="i in getRows() track by $index" ng-init="idx = $index">
        <td ng-repeat="c in getColumns() track by $index" ng-init="idy=$index">{{arr[(idx*x)+idy]}}</td>
      </tr>
    </table>

  </div>
</div>

Answer 3

Answer №2

Great puzzle! Here's my solution:

http://jsfiddle.net/ABC123/99/

<div ng-app='myApp' ng-controller="Main">
<table>
    <tr ng-repeat="r in rows()">
        <td ng-repeat="c in columns(r)">{{ c }}</td>
    </tr>
</table>
</div>

var myApp = angular.module('myApp', []);
myApp.controller('Main', function($scope){

    $scope.arr = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P"];

    $scope.columnCount = 3;

  $scope.rows = function(){
    var input = [];
    for (var i=0; i< $scope.arr.length / $scope.columnCount; i++) input.push(i);
    return input;
  };

  $scope.columns = function(row){
      var start = row * $scope.columnCount;
      var end = start + $scope.columnCount;
    var input = [];
    for (var i=start; i< end; i++) input.push($scope.arr[i]);
    return input;
  };
});

Answer 4

Great puzzle! Here's my solution:

http://jsfiddle.net/ABC123/99/

<div ng-app='myApp' ng-controller="Main">
<table>
    <tr ng-repeat="r in rows()">
        <td ng-repeat="c in columns(r)">{{ c }}</td>
    </tr>
</table>
</div>

var myApp = angular.module('myApp', []);
myApp.controller('Main', function($scope){

    $scope.arr = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P"];

    $scope.columnCount = 3;

  $scope.rows = function(){
    var input = [];
    for (var i=0; i< $scope.arr.length / $scope.columnCount; i++) input.push(i);
    return input;
  };

  $scope.columns = function(row){
      var start = row * $scope.columnCount;
      var end = start + $scope.columnCount;
    var input = [];
    for (var i=start; i< end; i++) input.push($scope.arr[i]);
    return input;
  };
});

Creating a table using ng-repeat in AngularJS on a single-level array

Answer №1

Answer №2

Similar questions

Applying CSS to select a different element style within a webpage

How can I pick out paragraphs that don't end with a period and eliminate dashes using jQuery or JavaScript?

How can I display a string stored in a JSON file onto a TMP_Text component in Unity using C#?

Tips for combining dvloading and required functionalities on the submit button

Clicking a button triggers Ajax to refresh the content of a div

The transformation rotation applied in CSS must not have any impact on the styling of my span and paragraph

How to reach the Twitter share iframe with JavaScript/HTML

What is the best way to retrieve an array situated inside an array of objects in Angular?

Toggle checkbox fields based on link or checkbox selection

Tips for concealing a table row depending on the value of an option in AngularJS

What is the method for invoking a controller from a separate file in AngularJS?

Combining arrays in JSON with the power of Groovy 2.4

Managing AJAX Errors in PHPAJAX error handling tips for developers

"Utilizing Angular within the same controller, find a way to pass data fetched from SQLite from one function to another function for onload operations

Retrieve data using the designated key and convert it into JSON format

Is there a way to store the outcome of my node api request in a variable and then transmit it using Express?

Automated file uploading with AJAX on Firefox

Creating functionality that activates when specific classes are clicked in elements loaded dynamically through Ajax

how to use AngularJS filter and ng-options to format specific options as bold in a select dropdown

What is the process for retrieving a list of image URLs from Firebase storage and then transferring them to Cloud Firestore?