如何從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動態建立菜單？

回答

相關問題