如何从json动态建立菜单？

现在我的主菜单html正在手动编辑。但我想从json动态创建主菜单。如何才能做到这一点？如何从json动态建立菜单？

我有以下app.js：

var app = angular.module('MyApp', ['ngRoute', 'oc.lazyLoad']); 
app.config(function($routeProvider, $locationProvider){ 
    var routeDef = function (name) { 
      return { 
        templateUrl: 'partials/' + name + '.htm', 
        controller: name.charAt(0).toUpperCase() + name.slice(1) + 'Ctrl', 
        resolve: { 
          loader: ['$ocLazyLoad', function($ocLazyLoad) { 
            return $ocLazyLoad.load('controllers/' + name + '.js'); 
          }] 
        } 
      }; 
    }; 
    $routeProvider. 
      when('/home', routeDef('home')). 
      when('/controller1', routeDef('controller1')). 
      when('/controller2', routeDef('controller2')). 
      otherwise({ redirectTo: '/home' }); 
    // $locationProvider.html5Mode(true); 
}); 

app.controller('NavCtrl', ['$scope', '$location', function ($scope, $location) { 
    $scope.navClass = function (page) { 
    var currentRoute = $location.path().substring(1) || 'index'; 
    return page === currentRoute ? 'active' : ''; 
    }; 
}]);

为HTML：

<html> 
... 
<body ng-controller="MyApp"> 
... 
    <ul class="nav nav-pills" ng-controller="NavCtrl"> 
    <li role="presentation" ng-class="navClass('home')"><a href="#/home">Home</a></li> 
    <li role="presentation" ng-class="navClass('controller1')"><a href="#/controller1">Controller1</a></li> 
    <li role="presentation" ng-class="navClass('controller2')"><a href="#/controller2">Controller2</a></li> 
    </ul> 

... 
    <div ng-view></div> 
... 
</body> 
</html>

来源

2015-11-04 JMW

也许这可能适用于一个简单的应用程序，但在一个更大的应用程序是最有可能会有一些*隐藏*链接，它不应该出现在菜单。我宁愿定义一个菜单结构对象，并用它来创建菜单和路线。 – Michael

我也曾经这样做过。我可以在ng-repeat中使用过滤器，以防我需要这个。但现在，我不知道如何列出路线定义。但我也喜欢你的方式，你有一个例子吗？ – JMW

所以，我已经看到它是如何在bootstrap模板中的人。他们使用json文件和菜单项。有用。而且你只能编辑1个文件。你不需要编译它或别的。只是建议。 – Errorpro

是的，这里是：

function SidebarLoader($http) { 
    this.getMenu = getMenu; 

    //////////////// 

    function getMenu(onReady, onError) { 
     var menuJson = '/app/json/sidebar.menu.json', 
      menuURL = menuJson + '?v=' + (new Date().getTime()); // jumps cache 

     onError = onError || function() { alert('Failure loading menu'); }; 

     $http 
     .get(menuURL) 
     .success(onReady) 
     .error(onError); 
    } 
}

控制器：

SidebarLoader.getMenu(sidebarReady); 

     function sidebarReady(items) { 
     $scope.menuItems = items; 
     }

玉/ HTML：

li(ng-repeat='item in menuItems | limitTo: 3 ', ng-class="{'dropdown': item.submenu}", dropdown="!!item.submenu")

来源

2015-11-04 10:07:04 Errorpro

非常感谢:-) – JMW

不客气;） – Errorpro

如何从json动态建立菜单？

回答

相关问题