Question

我有这个JSON文件：

"[{\"Menu\":\"General/Register/User\"},
{\"Menu\":\"App/MultiExport/Parameter\"},
{\"Menu\":\"App/MultiExport/CreateFile\"},
{\"Menu\":\"App/MultiCube/Create\"}]"

我必须在我的HTML端接收它并使用Angular JS将其转换为Boostrap NAV（ul，li和stuff）。

请注意每个＆＃34; /＆＃34;是一个不同级别的菜单，例如：

。一般。寄存器。用户 .APP .MultiExport 。参数。创建文件 .MultiCube .Create

如何使用Angular创建它？

提前致谢！

Answer 1

首先，创建一个获取JSON并将其转换为层次结构的服务，例如：

[ { "name": "General",
    "subitems": [ { "name": "Register",
                    "actions": [ "User" ] 
                  }
                ]
  },
  { "name": "App",
    "subitems": [ { "name": "MultiExport",
                    "actions": [ "Parameter", "CreateFile" ] 
                  },
                  { "name": "MultiCube",
                    "actions": [ "Create" ]
                  }
                ]
  }
}

其次，使用控制器创建一个模板，该控制器使用该服务并通过其他可视指令呈现它，例如ngRepeat，例如：

<div ng-repeat="menu in menus">
  {{menu.name}}
  <div ng-repeat="item in menu.subitems">
    {{item.name}}
    <div ng-repeat="action in item.actions">
      {{action}}
    </div>
  </div>
</div>

第三，创建一个使用模板和控制器的指令，并在页面中使用该指令，例如。

angular.module('foo', []).directive('foo', function() {
  return {
    templateUrl: 'foo.template.html',
    controller: 'FooController'
  };
});

使用AngularJS从JSON文件创建菜单

1 个答案: