如何使用双递归在 AngularJS 中创建菜单？ （功能+模板）

Question

我正在尝试使用模板和函数递归在 AngularJS 中创建一个菜单。不幸的是，代码使用了很多递归，所以请提供一些帮助。

这里是菜单数据（JSON 格式）：

var menu = {
            'users': {title: 'Users', href: '/admin/users', icon: 'fa-user', 'priority': '2'},
            'dashboard': {title: 'Dashboard', href: '/admin', icon: 'fa-home', badge: null, 'priority': '1'},
            'expert': {title: 'Expert users', href: '', icon: 'fa-cog', 'priority': '3'},
            'logins': {title: 'Social logins', href: '/admin/social-logins', icon: 'fa-lock', 'priority': '2', parent: 'expert'},
            'config': {title: 'Site config', href: '/admin/config', icon: 'fa-cog', 'priority': '1', parent: 'expert'},
            'security': {title: 'Site config', href: '/admin/config', icon: 'fa-key', 'priority': '1', parent: 'config'},
            'deploy': {title: 'Deploy', href: '/admin/deploy', icon: 'fa-upload', badge: null, 'priority': '1'},
            };

您可以注意到，有些项目有一个名为parent 的属性，它指向一个父键，它们将嵌套在该键下。

问题 #1： 处理此 JSON 并按优先级排序。如果一个项目有一个父键，则在父项目中创建一个children 键（用于模板递归）并将它们放在它下面。我认为这可以通过递归轻松完成，但我不知道该怎么做。

所以当代码正确时，它应该给出以下输出：

var final = [
            {title: 'Dashboard', href: '/admin', icon: 'fa-home', badge: null, 'priority': '1', id: 'dashboard'},
            {title: 'Users', href: '/admin/users', icon: 'fa-user', 'priority': '2', id: 'users'},
            {
                title: 'Expert users', href: '', icon: 'fa-cog', 'priority': '3', id: 'expert',
                children: [
                    { title: 'Site config', href: '/admin/config', icon: 'fa-cog', 'priority': '1', id: 'config',
                        children: [{title: 'Security settings', href: '/admin/security', icon: 'fa-key', 'priority': '1', id: 'security'}]
                    },
                    {title: 'Social logins', href: '/admin/social-logins', icon: 'fa-lock', 'priority': '2', id: 'logins'}
                ]
            },
            {title: 'Deploy', href: '/admin/deploy', icon: 'fa-upload', badge: null, id: 'deploy'}
            ]

问题 #2： 已解决。使用 AngularJS template recursion 渲染它。我想我已经用这些例子想出了这个。 Here is my attempt 渲染它。当数据格式正确时，菜单呈现得非常完美。

只需要问题 #1 的帮助。从menu var 创建final var（我猜是使用递归）。

Answer 1

试试这个： （顺便说一句，示例 JSON 的结果不是您发布的 var final 代码，因为“部署”的优先级高于“用户”并且处于同一级别（没有父级）。“专家用户”也没有parent 'User'。）也不需要递归，迭代代码可以正常工作并且速度更快。

var menu = {
            'users': {title: 'Users', href: '/admin/users', icon: 'fa-user', 'priority': '2'},
            'dashboard': {title: 'Dashboard', href: '/admin', icon: 'fa-home', badge: null, 'priority': '1'},
            'expert': {title: 'Expert users', href: '', icon: 'fa-cog', 'priority': '3'},
            'logins': {title: 'Social logins', href: '/admin/social-logins', icon: 'fa-lock', 'priority': '2', parent: 'expert'},
            'config': {title: 'Site config', href: '/admin/config', icon: 'fa-cog', 'priority': '1', parent: 'expert'},
            'security': {title: 'Site config', href: '/admin/config', icon: 'fa-key', 'priority': '1', parent: 'config'},
            'deploy': {title: 'Deploy', href: '/admin/deploy', icon: 'fa-upload', badge: null, 'priority': '1'},
            };
  
function insertAccordingToPriority(element, array){
     var index = 0;
     while(array.length > index && array[index].priority <= element.priority){
          index += 1;
     }
     array.splice(index, 0, element);
}

function createFinal(original){
  var final = [];
  for(var i in original){
     original[i].id = i;
     if(original[i].parent && original[original[i].parent]){
        if(!original[original[i].parent].children) original[original[i].parent].children = [];
     	insertAccordingToPriority(original[i], original[original[i].parent].children);
     }else insertAccordingToPriority(original[i], final);
  }
  return final;
}

var result = createFinal(menu);
console.log(result);