How to make dynamic menu with ng-repeat 2 level or or level

Question

I have two objects.

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" } ]

I want to create, for now, two level dynamic menu having dropdown if menu has submenu. I want an output like shown in this img.

Tell me how to put ng-repeat in HTML. How to make required json object from above two objects.

I know how to put html and other stuff. Just help me with ng-repeat and UL and LI.

Answer 1

The simplest way of doing this is if you could combine the modules array with the subModules array, something like this (only including module 1 for clarity):

$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" } 
        ]
     }
];

If your model looks like this, you could easily have nested ng-repeats:

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

if you for some reason can't get your modules/submodules like that (for intstance loading them from a server you can't control), you can simply create the model by adding this in your controller:

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