1

同様の質問が 2 つあります。

最初の同様の質問とまったく同じように動的メニューを作成する必要がありますが、ページに権利をハードコードすることはできません。管理者はカスタム ロールを作成し、このロールが表示できるメニュー項目を選択できます。

<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>

自分の戦略をどのように想像すればよいですか？

4

2 に答える 2

0

AngularJS を使用してデータベース データから動的メニューを作成する実装は非常に簡単です。

次のようなナビゲーションメニュー用のテーブルがデータベースにあるとします。

動的メニューのテーブル構造

データベースからメニューを取得するためのコードの下に記述します

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

ここにangularjsコントローラーがあります

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 コード

<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>
于 2015-12-22T05:02:59.407 に答える