CODEWITHSUNDEEP
c#angularjs
kay00
kay00

Reputation: 447

Iterate grouping in angular. How do I display the key

I have this groupItem in my controller

var groupedItem = returnItem.GroupBy(x => x.Goal).AsQueryable();

This is what the groupItem look like

[
{"Goal":"X","Task":""A,"TaskArgument":null},
{"Goal":"X","Task":"B","TaskArgument":null},
{"Goal":"X","Task":"B","TaskArgument":null},
]

[
{"Goal":"Y","Task":"A","TaskArgument":null},

]

This is what I see in html for

<ul  ng-repeat="(s,t) in groupedItem">
        Group name: {{ s }}

        <li ng-repeat="st in t">
            each one: {{ st.Task }}
        </li>
    </ul>

Group name:0
each one: A
each one: B
each one: B
Group name:1
each one: A

How do I display the Group Name ( X and Y) ? If I have {{s.Goal}} there is no value.

Upvotes: 0

Views: 41

Answers (1)

H&#229;kan Fahlstedt
H&#229;kan Fahlstedt

Reputation: 2095

<ul ng-repeat="(s,t) in groupedItem">
        Group name: {{ t[0].Goal }}

        <li ng-repeat="st in t">
            each one: {{ st.Task }}
        </li>
    </ul>

This solution relies on the fact that no group is empty.

Upvotes: 1

Related Questions