AngularJS ng-repeat: How to iterate on object's property array while iterating the object array

Question

I have a particular question:

I've got this objects in an array in my scope:

Object[0] {
   configured: true,
   configuration: {
     Object[0] {
       qty1: 1,
       qty2: 2
     }
     Object[1] {
       qty1: 3,
       qty2: 4
     }
   }
},
Object[1] {
   configured: true,
   configuration: {
     Object[0] {
       qty1: 5,
       qty2: 6
     }
     Object[1] {
       qty1: 7,
       qty2: 8
     }
   }
}

Now, I'm using an ng-repeat directive to display the objects in my table

<tr ng-repeat="x in array| filter: {configured: true}">
   ...
</tr>

but I need to display, in every td, the qty values. The result must be something like this:

<tr>
    <td>1</td> 
    <td>2</td> 
<tr>
<tr>
    <td>3</td> 
    <td>4</td> 
<tr>
<tr>
    <td>5</td> 
    <td>6</td> 
<tr>

I'm wondering if is there any way of doing this using only angular directives (without using a temp array filled with qty values)?

Thank You very much, have a nice day! :)

bugs_cena · Accepted Answer · 2017-05-31 18:32:07Z

2

Just iterate over the internal object

controller.js

$scope.getValues = function(configuration) {
    var values = [];
    configuration.forEach(function(c) {
      values = values.concat(Object.values(c));
    });
    return values
}

template

<tr ng-repeat="x in array| filter: {configured: true}">
    <td ng-repeat="val in getValues(x.configuration)" ng-bind="::val"></td>
</tr>

edited May 31, 2017 at 18:32

answered May 31, 2017 at 18:03

bugs_cena

4945 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

GermaN Over a year ago

Hi bugs_cena, thank you very much for your answer. Ok, wow, so I can nest repeats... And what if I would as a result something like this? This could not be achieved with a ng-repeat nesting, right? <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> <tr> <td>4</td> </tr> <tr> <td>5</td> </tr> <tr> <td>6</td> </tr> Thanks!! :D

bugs_cena Over a year ago

Yes, you can't use nested ng-repeat - and also you may not need one. You just need to create a variable that holds the flattened values that needs to be rendered. <tr ng-repeat="val in flattendValues"><td ng-bind="::val"></td></tr>

GermaN Over a year ago

Clear! Thank you, friend!

Collectives™ on Stack Overflow

AngularJS ng-repeat: How to iterate on object's property array while iterating the object array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related