I couldn't solve a problem. I want to make a design in which there are submenus in a main menu in a sidebar. I am using nested ng-repeat. But the elements formed in the DOM are not seen in the UI and I cannot see the submenus. Model from request;
Here, each object keeps its parent menu information and its own submenu as an array.
Html kodu;
<div class="list-group" ng-repeat="data in MainDataSource">
<a href="#" style="margin-left:4px;"
class="list-group-item list-group-item-action sub-menu-btn">
<i style="margin-right:1px;" class="fas fa-users"></i>
<span class="menu-text">{{data.MenuName}}</span>
<i style="float:right; margin-top:5px;" class="fas fa-chevron-right"></i>
</a>
<div class="list-group list-group-flush sub-menu sub-menu-active">
<a style="padding-left:30px;"
class="list-group-item list-group-item-action sub-menu-item"
ng-repeat="subMenu in data.ReportSubMenus">
<i class="fas fa-archive"></i>
<span class="menu-text">{{subMenu.SubMenuName}}</span>
</a>
</div>
</div>
The first loop gives me the main menus, while the second loop gives the submenus of the main menus.
(MainDataSource) I put the values from the request in MainDataSource.
(data.ReportSubMenus) Here is the array containing the submenus of the main menus.
Sonuç olarak Dom'da;
The structure I want to do is formed and 3 main menus (divs) coming from the loop and their own submenus are formed under them.
However, although the main menus are formed in the image, the submenus do not open and do not appear.
Here, Menu1, Menu2 and Menu3 are the three elements that I created as a result of the loop, the click action does not trigger any event and the submenus do not open.
But if I make this system without loops and assign static values, the system works.
Where am I doing the mistake, if you can help I would be very grateful, thanks in advance.