如何使用双递归在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的帮助。从final var创建menu var（我猜是使用递归）。

Answer 1

试试这个： （顺便说一下，示例JSON的结果不是您发布的var final代码，因为'Deploy'比'User'具有更高的优先级，并且处于同一级别（没有父级）。还有'Expert User'没有父'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);