Question

以下是Plunk代码也可以立即验证

http://next.plnkr.co/edit/vrI2haNy1zYPDcCWh7gj?p=preview&utm_source=legacy&utm_medium=worker&utm_campaign=next&preview

Java脚本代码：它包含虚拟json，根节点是Admin System，子菜单如Angular，Linux，Server

这里的UI将显示为“以下格式”，并且此菜单将能够“展开”和“关闭”或折叠，因此可以从Service处获取数据，并可以在项目中使用相同的方式

angular.module('myapp', ['ui.bootstrap'])
  .controller("MainController", ["$scope", 
        function($scope){
          $scope.bodyText = "Test Menu";


           $scope.showSubmenu = function(item) {
            if($scope.activeParentIndex === item){
                $scope.activeParentIndex = "";
            }else{
                $scope.activeParentIndex = item;
            }
        }

        $scope.isShowing = function(index) {
            if($scope.activeParentIndex === index){
                return true;  
            } else{
                return false;
            }
        };

        $scope.modulos = 
          [{"module":"Admin System ",
           "adm_modulo_id":1,
           "submodule":[{"res":"Angular","url":"#/admin/1"},
                        {"res":"Linux","url":"#/admin/2"},
                        {"res":"Server","url":"#/admin/3"}
                        ]

          }];

        }]);

HTML代码：它将显示伪json代码作为菜单和子菜单

<!DOCTYPE html>
<html ng-app="myapp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="bootstrap-css@3.x" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.9/angular.js" data-semver="1.2.9"></script>
  <script data-require="ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
  <script src="app.js"></script>
</head>

<body>
  <h1>Test</h1>
  <div ng-controller="MainController">
    {{bodyText}}

    <ul class="sidebar-menu" ng-repeat="m in modulos">
      <li class="treeview" ng-repeat="(itemIndex, item) in modulos">
        <a ng-click="showSubmenu(itemIndex)">
          <i class="fa fa-table"></i> <span>{{item.module}}</span>
        </a>

        <ul class="sub-nav" ng-show="isShowing(itemIndex)">
          <li ng-repeat="sub_element in m.submodule">
            <a href="{{sub_element.url}}">{{sub_element.res}}</a>
          </li>
        </ul>
      </li>
    </ul>

  </div>
</body>

</html>

如何使用AngularJS从JSON创建动态菜单

0 个答案: