Dynamic menu using Angularjs

Asked

Viewed 1,306 times

5

I have an application that has a menu at the top and another on the left side. Menu items must be filled with BD data according to access profile. However, the menu is not being rendered when there is a route change.

Shell js.:

<section>
 <div data-ng-include="'app/controllers/layout/header.html'"></div>
 <div id="menuDin" data-ng-include="'app/autenticado/menuDinamico.html'"></div>
    <div id="corpo" ng-view=""></div>
 <div data-ng-include="'app/controllers/layout/footer.html'"></div>
</section>
angularjs

1 answer

3


You can provide an object with your menu items from your controller and then use ng-repeat to draw the menu.

class MyCtrl
    constructor: ->
        @itens_menu = [ 
            {label: 'Menu1', href: 'url1'}, 
            {label: 'Menu2', href: 'url2'}
        ]


<ul ng-controller="MyCtrl as myctrl">
        <li ng-repeat="item in myctrl.itens_menu">
            <a href="{{item.href}}">{{item.label}}</a>
        </li>
</ul>

  • The same class above in javascript would look something like this var Myctrl; Myctrl = (Function() { Myctrl.name = 'Myctrl'; Function Myctrl() { this.itens_menu = [ { label: 'Menu1', href: 'url1' }, { label: 'Menu2', href: url2' } ]; } Return Myctrl; })();

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.