How to load side menu items from json file using ng-repeat in side-menus.tpl.html

See All Questions HereCategory: AngularJS version (1.7.x)How to load side menu items from json file using ng-repeat in side-menus.tpl.html
ciadmin asked 2 weeks ago

Define menu using html works, code segment as follows:

<ul data-smart-menu>
<li data-menu-collapse>
<a href="#" title="Dashboard"><i class="fa fa-lg fa-fw fa-home"></i> <span
class="menu-item-parent">{{getWord('Dashboard')}}</span></a>
<ul>
<li data-ui-sref-active="active">
<a data-ui-sref="app.mydashboard">{{getWord('My Dashboard')}}</a>
</li>
<li data-ui-sref-active="active">
<a data-ui-sref="app.labdashboard">{{getWord('Lab Dashboard')}}</a>
</li>
</ul>
</li>
</ul>

Define menu using json and ng-repeat does not work, code segment as follows

<ul data-smart-menu>
<li ng-repeat="topmenu in sidemenu.items" data-menu-collapse>

<a href="#" title="{{topmenu.title}}"><i class="{{topmenu.icon}}"></i>
<span class="menu-item-parent">{{getWord(topmenu.title)}}</span>
</a>

<ul ng-if="topmenu.sitems.length > 0">
<li ng-repeat="submenu in topmenu.sitems" data-ui-sref-active="active">
<i class="{{submenu.icon}}"></i>
<a data-ui-sref="{{submenu.sref}}">{{submenu.title}}</a>
</li>
</ul>
</li>
</ul>

angular.module('app').factory('moduleMenu', function($http, APP_CONFIG){
return {
list: $http.get('config/menu.json')
}
});

angular.module('app').directive('sideMenus', function(moduleMenu){
return {
restrict: "EA",
replace: true,
templateUrl: "../common/app/dashboard/menus/side-menus.tpl.html",
scope: true,
link: function(scope, element){
moduleMenu.list.then(function(response){
scope.sidemenu = response.data;
});
}
}
});
0 Answers
MyOrange Staff answered 3 years ago

[dwqa-list-questions]

Leave a Reply