angularjs – 如何使用Angular Material动态创建基于JSON的菜单
发布时间:2020-12-17 08:48:04 所属栏目:安全 来源:网络整理
导读:我试图使用 Angular Material Menu Bar directive递归创建一个菜单栏,但结果不符合预期.到目前为止,我所拥有的最佳解决方案是创建一个指令并递归调用它,如下所示: https://plnkr.co/edit/5pFmmD6K3qz5qolRifVA.请注意,此Plunker中有两个菜单栏.第一个是使用
我试图使用
Angular Material Menu Bar directive递归创建一个菜单栏,但结果不符合预期.到目前为止,我所拥有的最佳解决方案是创建一个指令并递归调用它,如下所示:
https://plnkr.co/edit/5pFmmD6K3qz5qolRifVA.请注意,此Plunker中有两个菜单栏.第一个是使用JSON的递归结构创建的,第二个是直接写在模板上.当有嵌套菜单如“Lorem – > Dolor – > …”时,我的解决方案会出现问题,因为嵌套菜单没有正确对齐.
检查Chrome上生成的代码,我注意到第二个菜单栏中的嵌套菜单(直接写在模板上)有一些关于其嵌套状态的属性: <md-menu md-position-mode="cascade" class="md-nested-menu md-menu ng-scope" md-nest-level="1"> ... </md-menu> 而第一个菜单栏中的相同菜单没有: <md-menu ng-if="ctrl.isCompoundedMenuItem()" class="md-menu ng-scope"> ... </md-menu> 我该怎么做才能解决这个问题? 只是添加一个信息:我已经尝试了方法using
通过设置指令模板中“手动”问题中提到的属性和类,我能够解决菜单行为的问题,如下所示:
<md-menu ng-if="ctrl.isCompoundedMenuItem()" md-position-mode="cascade" class="md-nested-menu" md-nest-level="{{ ::nestLevel }}"> 其中nestLevel位于隔离范围内,并在每个新级别上递增: <md-menu-content class="md-menu-bar-menu md-dense"> <my-menu-item ng-repeat="item in menu.items" menu="item" nest-level="{{ ::(nestLevel + 1) }}"></my-menu-item> </md-menu-content> 从1开始,自然: <md-menu-bar ...> ... <md-menu-content> <my-menu-item ng-repeat="item in menu.items" menu="item" nest-level="1"></my-menu-item> </md-menu-content> </md-menu-bar> 更新的plunker可以在这里看到:https://plnkr.co/edit/QBjeR2hZFKsJ88Hl4ptG. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |