Question

我正在使用智能管理创建一个网页。我从数组中获取左菜单数据。我需要根据每个数据的父ID使用angular正确显示菜单和子菜单。但是我不知道怎么做。任何人都可以帮助我吗？

脚本：

var app = angular.module('myApp', []);
        app.controller('myController', ['$scope', '$http', function ($scope, $http) {
            $scope.Menus = [];
            $http.get('/list/GetSiteMenu').then(function (data) {
                $scope.Menus = data.data.data.record;

            }, function (error) {
                alert('Error');
            });          

        }]);

HTML：

<nav ng-repeat="menuData in Menus">
            <ul>
                <li>
                    <a href="menuData.url" title="menuData.name"></a>
                     <ul>
                         <li><a></a></li>
                     </ul>
                </li>
            </ul>
        </nav>

console.log（$ scope.Menus）将采用以下格式：

Answer 1

您可以使用ng-bootstrap-submenu https://www.npmjs.com/package/ng-bootstrap-submenu

它是一个用于将子菜单项添加到父菜单项的模块，它易于使用

Answer 2

需要迭代menuData.menu_roles

<nav ng-repeat="menuData in Menus">
  <ul>
    <li>
      <a href="menuData.url" title="menuData.name"></a>
      <ul>
        <li ng-repeat ="subMenu in menuData.menu_roles">
          <a></a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Answer 3

你可以根据你的json使用这样的东西使用rootscope而不是范围来存储菜单

＆＃13;

<section class="sidebar">
  <!-- sidebar menu: : style can be found in sidebar.less -->
  <ul class="sidebar-menu">
    <li class="{{menuItem.LiCssClass}}" ng-repeat="menuItem in $root.menuList" ng-class="{active:isActive('{{menuItem.NavigationURL}}')}">
      <a ng-href="{{menuItem.NavigationURL}}" ng-click="sidebar()">
        <i class="{{menuItem.ICssClass}}"></i>
        <span class="{{menuItem.SpanCssClass}}">&nbsp;&nbsp;&nbsp;{{menuItem.DisplayName}}</span>
        <i class="{{menuItem.TreeViewIcon}}"></i>
      </a>
      <ul class="{{menuItem.UiCssClass}}">
        <li id="{{subMenuItem.TagName}}" ng-repeat="subMenuItem in menuItem.SubMenu" ng-class="{active:isActive('{{subMenuItem.NavigationURL}}')}">
          <a ng-href="{{subMenuItem.NavigationURL}}">
            <i class="{{subMenuItem.ICssClass}}"></i><span>{{subMenuItem.DisplayName}}</span>
          </a>
        </li>
      </ul>
    </li>
  </ul>
</section>

＆＃13;

如何从数组中获取菜单和子菜单数据？

3 个答案: