CODEWITHSUNDEEP
angularjs
Bastien Vandamme
Bastien Vandamme

Reputation: 18465

How can create a dynamic menu depending on the user's rights, in angularjs?

There is two similar questions:

I need to create a dynamic menu exactly like in the first similar question exept I cannot hardcode the rights in my page. An adminitrator can create custom roles and chose wich menu item this role can see. 

<li class="dropdown"><img role="button" class="dropdown-toggle" data-toggle="dropdown" ng-src="{{avatarUrl}}" />
  <ul class="dropdown-menu pull-right" role="menu">
    <li ng-show="???"><a ng-click="action01()">Action one</a></li>
    <li ng-show="???"><a ng-click="action02()">Action two</a></li>
    <li ng-show="???"><a ng-click="action03()">Action tree</a></li>
    <li ng-show="???"><a ng-click="action04()">Action four</a></li>
  </ul>
</li>

How should I imagine my strategy?

Upvotes: 1

Views: 5381

Answers (2)

Sourav Mondal
Sourav Mondal

Reputation: 435

It's very simple to implement Creating dynamic menu from database data using AngularJS

Suppose we have a table in our database for navigation menus like,

Table structure for dynamic menu

Write below code for fetch menus from database

public JsonResult GetSiteMenu()
{
    using (MyDatabaseEntities dc = new MyDatabaseEntities())
    {
        var menu = dc.SiteMenus.ToList();
        return new JsonResult { Data = menu, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }
}

and here is the angularjs controller 

var app = angular.module('MyApp', []);
app.controller('menuController', ['$scope', '$http', function ($scope, $http) {
    $scope.SiteMenu = [];
    $http.get('/home/GetSiteMenu').then(function (data) {
        $scope.SiteMenu = data.data;
    }, function (error) {
        alert('Error');
    })
}])

HTML Code

<div ng-app="MyApp">
    <div ng-controller="menuController">
        @* Here first of all we will create a ng-template *@
        <script type="text/ng-template" id="treeMenu">
            <a href="{{menu.Url}}">{{menu.Name}}</a>
            @* We will create submenu only when available *@
            <ul ng-if="(SiteMenu | filter:{ParentID : menu.ID}).length > 0">
                <li ng-repeat="menu in SiteMenu | filter:{ParentID : menu.ID}" ng-include="'treeMenu'"></li>
            </ul>
        </script>
        <ul class="main-navigation">
            @* Here we will load only top level menu *@
            <li ng-repeat="menu in SiteMenu | filter:{ParentID : 0}" ng-include="'treeMenu'"></li>
        </ul>
    </div>
</div>

Upvotes: 0

laurent
laurent

Reputation: 90804

I would create something like a HeaderController an attach to it a function that tells if a given role can do the given action. Presumably you have the ACL stored somewhere so perhaps you can create a service for it. Something like this:

controller('HeaderController', ['$scope', 'Acl', function($scope, Acl) {

    $scope.roleCanDo = function(role, action) {
        return Acl.roleCanDo(role, action);
    }

}])

and your view would be like this:

<li class="dropdown"><img role="button" class="dropdown-toggle" data-toggle="dropdown" ng-src="{{avatarUrl}}" />
  <ul class="dropdown-menu pull-right" role="menu">
    <li ng-show="roleCanDo(currentUser.role, 'action01')"><a ng-click="action01()">Action one</a></li>
    <li ng-show="roleCanDo(currentUser.role, 'action02')"><a ng-click="action02()">Action two</a></li>
    <li ng-show="roleCanDo(currentUser.role, 'action03')"><a ng-click="action03()">Action tree</a></li>
    <li ng-show="roleCanDo(currentUser.role, 'action04')"><a ng-click="action04()">Action four</a></li>
  </ul>
</li>

Obviously the actual code will depend on your current system but you get the idea.

Upvotes: 1

Related Questions