如何使用ng-repeat 2級別或或級別製作動態菜單

我有兩個對象。如何使用ng-repeat 2級別或或級別製作動態菜單

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對象。

enter image description here

我知道如何把HTML N以外的東西。只要幫助我ng-repeat和UL和LI。否則我會管理。

來源

2014-10-12 micronyks

這樣做的最簡單的方法是，如果你可以在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); 
     } 
    }); 
});

來源

2014-10-12 15:12:24

這是我長時間卡住的地步。我不知道如何製作一個json，就像你在第一段中展示的那樣。如果你能從我的代碼中幫助我。 – micronyks 2014-10-12 15:20:34

在你的代碼中，它看起來像你的模塊/子模塊數組是硬編碼的。如果是這樣的話，您可以簡單地按照我的第一個片段中的模式，將子模塊放置在模塊內的數組中。如果您無法控制JSON的外觀，可以使用第三個代碼片段中的代碼，將子模塊注入每個模塊對象的「SubModules」字段。 – 2014-10-12 15:27:31

不支持其未硬編碼。讓我試試你的片段，讓我檢查一下。 – micronyks 2014-10-12 15:38:45

如何使用ng-repeat 2級別或或級別製作動態菜單

回答

相關問題