Angular ng-repeat nested array

Question

I've got this array

 {
    "menus": [
        {
            "id": "4",
            "name": "Administrator",
            "icon": "symbol-male",
            "is_show": "1",
            "sub_menus": [
                {
                    "id": "6",
                    "admin_menu_id": "4",
                    "name": "Manage Admin Role",
                    "link": "admin-roles",
                    "is_show": "1"
                },
                {
                    "id": "5",
                    "admin_menu_id": "4",
                    "name": "Manage Administrator",
                    "link": "admins",
                    "is_show": "1"
                }
            ]
        }
    ]
}

How can I ng-repeat with the sub_menus properly with the menus?

I've tried

 <ul>
    <li ng-repeat="menu in menus">{{ menu.name }}
        <ul>
            <li ng-repeat="sub_menu in menu.sub_menus">{{ sub_menu.name}} </li>
        </ul>
    </li>
 </ul>

But the sub_menus.name not shown when I repeat it.

It should works. I think you just have issue with css. Please show your code in controller — Nguyen Sy Thanh Son
– Nguyen Sy Thanh Son, Commented Nov 3, 2015 at 4:35
It seems to be working perfectly fine. Here, I replicated your code in this plunk: plnkr.co/edit/peMRlg?p=preview — Shivangi
– Shivangi, Commented Nov 3, 2015 at 4:41
@sstarlight: maybe you could check out the way I did. How are you storing data? Is it on $scope.menus? — Shivangi
– Shivangi, Commented Nov 3, 2015 at 4:56
Hi, i've found the problem within my other JS. it prevent it to show because of an element. Thanks. i've tried yours outside my container it's working perfectly. :) — ssuhat
– ssuhat, Commented Nov 3, 2015 at 5:07

J-D · Accepted Answer · 2015-11-03 04:37:33Z

2

Your html need to be something like below.

  <ul>
    <li ng-repeat="menu in menuItems.menus">{{ menu.name }}
        <ul>
            <li ng-repeat="sub_menu in menu.sub_menus">{{ sub_menu.name}} </li>
        </ul>
    </li>
 </ul>

Have alook at this JSFiddle

answered Nov 3, 2015 at 4:37

J-D

1,5751 gold badge11 silver badges23 bronze badges

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

2 Comments

J-D Over a year ago

The ng-repeat needs to be perform on array. So your main ng-repeat needs to be on menus which is part of your main json response which is not of type array. Have a look at JSFiddle. If it cant resolve the problem share your JsFiddle and will help you to get it resolve.

ssuhat Over a year ago

Hi, i've found the problem within my other JS. it prevent it to show because of an element. Thanks. i've tried yours outside my container it's working perfectly. :)

Collectives™ on Stack Overflow

Angular ng-repeat nested array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related