Angularjs: Complex table using ng-repeat [duplicate]

Question

I have this scope variable:

$scope.item = {
    "main1": {
        "proj1": ["comp1", "comp2"],
        "proj2": ["comp3", "comp4", "comp5"]
    },
    "main2": {
        "proj3": ["comp1", "comp2"],
        "proj4": ["comp3", "comp4"],
        "proj5": ["comp1"]
    }
};

And I want the table like this: http://plnkr.co/edit/DWgLUeie3XzNYGx7RxcX?p=preview

I'm able to use the ng-repeat on the first column, but not sure on how to use it for other columns.

You should not to use ngRepeat here, writing other directive can be simpler. — vp_arth
– vp_arth, Commented Nov 26, 2015 at 12:19
@vp_arth: Found a solution from another post and marked this question as duplicate. Thanks for your time. — Vimalraj Selvam
– Vimalraj Selvam, Commented Nov 26, 2015 at 12:20
Just be warned - all will too hard if you will want more levels/columns with this way :) — vp_arth
– vp_arth, Commented Nov 26, 2015 at 12:24
Agree you, I'm ensuring that I don't need more levels than this. — Vimalraj Selvam
– Vimalraj Selvam, Commented Nov 26, 2015 at 12:27

Simon H · Accepted Answer · 2015-11-26 11:46:01Z

0

OK, so the html is not correct below but you can unpack your json by following this pattern

 <... ng-repeat="(k1, v1) in item" ...>
    {{key}}    // main1
    <... ng-repeat="(k2,v2) in v1" ...>
        {{k2}}     // proj1
       <... ng-repeat="v3 in v2"...>
            {{v3}}     // comp1, comp2

answered Nov 26, 2015 at 11:46

Simon H

21.2k14 gold badges84 silver badges144 bronze badges

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

2 Comments

Vimalraj Selvam Over a year ago

This is the problem that I face. We have to think about rowspans for proj and comp columns. That is where I'm stuck. It would be great if you can try on the real table.

Simon H Over a year ago

Use can use e.g. rowspan={{v2.length}}

Collectives™ on Stack Overflow

Angularjs: Complex table using ng-repeat [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related