AngularJS ng-repeat is used to iterate over data contained within a model

Question

AngularJS ng-repeat is used to iterate over data contained within a model

I am curious to know if I can utilize ng-repeat with a model structured in the following way:

Illustrative Model:

$scope.items = {
   item1:{[1,2,3,4,5]},
   item2:{[a,b,c,d,e]},
   item3:{[a1,b2,c3,d4,e5]}
};

The desired table format using ng-repeat would be as follows:

-------------------------
| Item1 | Item2 | Item3 |
-------------------------
|   1   |   a   |   a1  |
|   2   |   b   |   b2  |
|   3   |   c   |   c3  |
|   4   |   d   |   d4  |
|   5   |   e   |   e5  |
-------------------------

If achieving this layout is not feasible with the current model structure, could you kindly propose some alternatives? Your assistance would be highly appreciated. Thank you in advance.

javascript angularjs angularjs-scope angularjs-ng-repeat

Answer 1

Answer №1

If you want to modify the data model, follow these steps:

function Modification($scope) {
    $scope.items = [{
        item1: 1,
        item2: 'a',
        item3: 'a1'
    }, {
        item1: 2,
        item2: 'b',
        item3: 'b2'
    }, {
        item1: 3,
        item2: 'c',
        item3: 'c3'
    }, ...];
}

<div ng-app ng-controller="Modification">
    <table>
        <tbody>
            <th>item1</th>
            <th>item2</th>
            <th>item3</th>
            <tr ng-repeat="item in items">{{item}}
                <td>{{item.item1}}</td>
                <td>{{item.item2}}</td>
                <td>{{item.item3}}</td>
            </tr>
        </tbody>
    </table>
</div>

DEMO

Answer 2

If you want to modify the data model, follow these steps:

function Modification($scope) {
    $scope.items = [{
        item1: 1,
        item2: 'a',
        item3: 'a1'
    }, {
        item1: 2,
        item2: 'b',
        item3: 'b2'
    }, {
        item1: 3,
        item2: 'c',
        item3: 'c3'
    }, ...];
}

<div ng-app ng-controller="Modification">
    <table>
        <tbody>
            <th>item1</th>
            <th>item2</th>
            <th>item3</th>
            <tr ng-repeat="item in items">{{item}}
                <td>{{item.item1}}</td>
                <td>{{item.item2}}</td>
                <td>{{item.item3}}</td>
            </tr>
        </tbody>
    </table>
</div>

DEMO

Answer 3

Answer №2

If you are unable or unwilling to modify your data structure, or if you do not know the number of keys in advance, you can dynamically manipulate it. Below is an algorithm that can handle objects with varying numbers of keys and arrays of any length (as long as each array has the same length):

var results = { headers: [], values: [] };
angular.forEach(items, function(value, key) {
  results.headers.push(key);
  angular.forEach(value, function(inner, index) {
    results.values[index] = results.values[index] || [];
    results.values[index].push(inner);
  });
});
return results;

Once you have a transposed array, you can iterate through it programmatically:

<table ng-controller="DataController">
  <tr>
    <th ng-repeat="header in transposed.headers">{{header}}</th>
  </tr>
  <tr ng-repeat="ary in transposed.values">
    <td ng-repeat="item in ary">{{item}}</td>
  </tr>
</table>

Here's a demonstration that re-transposes the items object each time it changes: http://jsfiddle.net/BinaryMuse/BAGL5/

Answer 4

If you are unable or unwilling to modify your data structure, or if you do not know the number of keys in advance, you can dynamically manipulate it. Below is an algorithm that can handle objects with varying numbers of keys and arrays of any length (as long as each array has the same length):

var results = { headers: [], values: [] };
angular.forEach(items, function(value, key) {
  results.headers.push(key);
  angular.forEach(value, function(inner, index) {
    results.values[index] = results.values[index] || [];
    results.values[index].push(inner);
  });
});
return results;

Once you have a transposed array, you can iterate through it programmatically:

<table ng-controller="DataController">
  <tr>
    <th ng-repeat="header in transposed.headers">{{header}}</th>
  </tr>
  <tr ng-repeat="ary in transposed.values">
    <td ng-repeat="item in ary">{{item}}</td>
  </tr>
</table>

Here's a demonstration that re-transposes the items object each time it changes: http://jsfiddle.net/BinaryMuse/BAGL5/

AngularJS ng-repeat is used to iterate over data contained within a model

Answer №1

Answer №2

Similar questions

What is the best way to extract elements from an array object and store them in a separate array using JavaScript

The process of showcasing angularjs ng-repeat with a JSON object

Stop ajax request when select2 is clicked

Determine the quantity of particular information within an array of objects

Is there a way to show an image fetched from an axios call in a Vuejs img tag? I haven't found any solution that actually works

Tips for altering the browser tab color on a PC or Mac with HTML or JavaScript

How to use the groupBy function in Underscore.js

Toggle visibility on the child DOM element of each item in the v-for loop

Deciphering Korean for crawling using got

Encourage users to activate the physical web feature in compatible web browsers

Can you suggest a more "ember-esque" approach to calculate this value?

When an absolute positioned DIV is nested inside a relatively positioned DIV, it disappears when the page is scrolled

Depending on the chosen country, it is necessary to display the corresponding state and city options

Separate the navbar-brand and nav-items onto separate lines within the Bootstrap 4 navbar

The selection option fails to update when there is a change in the ng-model

What is the reason behind Intellij Code Inspection indicating that a selector is not being used?

Utilizing the powerful slice function within Lodash

Webpage push notifications are a convenient feature that allows websites to

What causes MongoDB to modify my UTC time zone from UTC+2:00 to UTC+0 when utilizing Mongoose in conjunction with moment-timezones.js?

Obtain random images from a sprite sheet using HTML5 canvas