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-repeat。如何从两个对象上面创建所需的json对象。

enter image description here

我知道如何把html和其他东西放在一起。只需帮助我使用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-repeats：

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

如果由于某种原因无法获得这样的模块/子模块（对于从您无法控制的服务器加载它们的情况），您可以通过在控制器中添加模型来创建模型：

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

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

1 个答案: