如何使用ng-repeat 2级别或或级别制作动态菜单

Question

我有两个对象。

1. $scope.modules=[ { "ModuleId": 1, "ModuleName": "Membership" }, 
        { "ModuleId": 2, "ModuleName": "Loan" }, 
        { "ModuleId": 3, "ModuleName": "News" }, 
        { "ModuleId": 4, "ModuleName": "Contact Us" }, 
        { "ModuleId": 5, "ModuleName": "About Us" }, 
        { "ModuleId": 6, "ModuleName": "FeedBack" }, 
        { "ModuleId": 7, "ModuleName": "Fee" }, 
        { "ModuleId": 8, "ModuleName": "Home" } ] 

2. $scope.subModules=[ { "ModuleId": 1, "SubModuleId": 1, "SubModuleName": "Get Membership" }, 
         { "ModuleId": 7, "SubModuleId": 2, "SubModuleName": "Fee Structure" }, 
         { "ModuleId": 7, "SubModuleId": 3, "SubModuleName": "Fee Submission" }, 
         { "ModuleId": 1, "SubModuleId": 4, "SubModuleName": "Our Members" }, 
         { "ModuleId": 7, "SubModuleId": 5, "SubModuleName": "Fee Status" }, 
         { "ModuleId": 2, "SubModuleId": 6, "SubModuleName": "Loan Structure" }, 
         { "ModuleId": 2, "SubModuleId": 7, "SubModuleName": "form" }, 
         { "ModuleId": 1, "SubModuleId": 8, "SubModuleName": "Inquiry" } ] 

我想创建，现在，如果菜单有子菜单，有两个级别的动态菜单有下拉菜单。 我想要一个像这样的图像显示输出...

告诉我如何把HTML重复ng。如何从两个对象上面创建所需的json对象。

我知道如何把HTML N以外的东西。只要帮助我ng-repeat和UL和LI。否则我会管理。

Answer 1

这样做的最简单的方法是，如果你可以在modules阵列与subModules阵列，像这样（只包括模块1为清楚起见）相结合：

$scope.modules = [ 
    {ModuleId: 1, ModuleName: 'Membership', SubModules: 
     [ 
      { "ModuleId": 1, "SubModuleId": 1, "SubModuleName": "Get Membership" } 
      { "ModuleId": 1, "SubModuleId": 4, "SubModuleName": "Our Members" }, 
      { "ModuleId": 1, "SubModuleId": 8, "SubModuleName": "Inquiry" } 
     ] 
    } 
]; 

如果你的模型是这样的，你可以很容易地嵌套NG-重复：

<ul> 
    <li ng-repeat="module in modules"> 
     {{module.ModuleName}} 
     <ul> 
      <li ng-repeat="subModule in module.SubModules"> 
       {{subModule.SubModuleName}} 
      </li> 
     </ul> 
    </li> 
</ul> 

，如果你因为某些原因不能让你的模块/子模块一样，（对于intstance从你无法控制的服务器加载它们），你可以简单地创建在y中加入这个模型我们的控制器：

angular.forEach($scope.modules, function(module){ 
    module.SubModules = []; 
    angular.forEach($scope.subModules, function(subModule){ 
     if(subModule.ModuleId === module.ModuleId){ 
      module.SubModules.push(subModule); 
     } 
    }); 
});