// Based upon http://jsfiddle.net/83XFS/2/
var myTable = angular.module('myTable', []);
myTable.controller('MainCtrl', ['$scope', function ($scope) {
$scope.MenuData = [
{
"Menu_Master_ID" : "100",
"Menu_Master_Name" : "MenuMasterName100",
"URL_Master_ID": "4000",
"URL_Detail_ID": "5000",
"URL_Detail_Actual": "urlWhatever",
"MenuDetails" : [
{
"Menu_Detail_ID" : "Menu_Detail_ID111",
"Menu_Detail_Name" : "MenuDetailName100111",
"URL_Master_ID": "4000",
"URL_Detail_ID": "5000",
"URL_Detail_Actual": "urlWhatever",
"MenuTasks" : [
{
"Menu_Task_ID" : "MenuTaskID3000",
"Menu_Task_Name" : "MenuTask TaskOne",
"URL_Master_ID": "4000",
"URL_Detail_ID": "5000",
"URL_Detail_Actual": "urlWhatever",
"MenuCrumbs" : [
{
"Menu_Crumb_ID" : "10000",
"Menu_Crumb_Name" : "MenuCrumb One",
"URL_Master_ID": "4000",
"URL_Detail_ID": "5000",
"URL_Detail_Actual": "urlWhatever",
}
,
{
"Menu_Crumb_ID" : "20000",
"Menu_Crumb_Name" : "MenuCrumb Two",
"URL_Master_ID": "4000",
"URL_Detail_ID": "5000",
"URL_Detail_Actual": "urlWhatever",
}
]
}
,
{
"Menu_Task_ID" : "MenuTaskID3002",
"Menu_Task_Name" : "MenuTask TaskTwo",
"URL_Master_ID": "4000",
"URL_Detail_ID": "5000",
"URL_Detail_Actual": "urlWhatever"
}
]
},
{
"Menu_Detail_ID" : "Menu_Detail_ID222",
"Menu_Detail_Name" : "MenuDetailName100222",
"URL_Master_ID": "4000",
"URL_Detail_ID": "5000",
"URL_Detail_Actual": "urlWhatever",
"MenuTasks" : [{
"Menu_Task_ID" : "MenuTaskID3004",
"Menu_Task_Name" : "MenuTask TaskOne",
"MenuCrumbs" : [{
"Menu_Crumb_ID" : "10000",
"Menu_Crumb_Name" : "MenuCrumb One",
"URL_Master_ID": "4000",
"URL_Detail_ID": "5000",
"URL_Detail_Actual": "urlWhatever",
}
]
}
]
}
]
}
,
{
"Menu_Master_ID" : "200",
"Menu_Master_Name" : "MenuMasterURL_Detail_Actual00",
"URL_Detail_Actual": "urlWhatever",
"MenuDetails" : [
{
"Menu_Detail_ID" : "Menu_Detail_ID111",
"Menu_Detail_Name" : "MenuDetailURL_Detail_Actual00111",
"URL_Master_ID": "4000",
"URL_Detail_ID": "5000",
"URL_Detail_Actual": "urlWhatever",
"MenuTasks" : [{
"Menu_Task_ID" : "MenuTaskID3006",
"Menu_Task_Name" : "MenuTask TaskOne",
"URL_Master_ID": "4000",
"URL_Detail_ID": "5000",
"URL_Detail_Actual": "urlWhatever",
"MenuCrumbs" : [{
"Menu_Crumb_ID" : "10000",
"Menu_Crumb_Name" : "MenuCrumb One",
"URL_Master_ID": "4000",
"URL_Detail_ID": "5000",
"URL_Detail_Actual": "urlWhatever",
}
]
}, {
"Menu_Task_ID" : "MenuTaskID3008",
"Menu_Task_Name" : "MenuTask TaskTwo",
"URL_Master_ID": "4000",
"URL_Detail_ID": "5000",
"URL_Detail_Actual": "urlWhatever",
}
]
},
{
"Menu_Detail_ID" : "Menu_Detail_ID222",
"Menu_Detail_Name" : "MenuDetailURL_Detail_Actual00222",
"URL_Master_ID": "4000",
"URL_Detail_ID": "5000",
"URL_Detail_Actual": "urlWhatever",
"MenuTasks" : [{
"Menu_Task_ID" : "MenuTaskID3009",
"Menu_Task_Name" : "MenuTask TaskOne",
"URL_Master_ID": "4000",
"URL_Detail_ID": "5000",
"URL_Detail_Actual": "urlWhatever",
"MenuCrumbs" : [{
"Menu_Crumb_ID" : "10000",
"Menu_Crumb_Name" : "MenuCrumb One",
"URL_Master_ID": "4000",
"URL_Detail_ID": "5000",
"URL_Detail_Actual": "urlWhatever",
}
]
}
]
}
]
}
];
}
]
);
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Nested ng-repeat 3 deep</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-app="myTable" ng-controller="MainCtrl">
<br />
<p class='hangingindent'>
I need to convert an old jQuery Superfish menu to an AngularJS md-menu. Everything inclucing the data structure has changed.
</p>
<p class='hangingindent'>
Instead of hacking my way through the nested ng-repeat loops, I put together prototype to see the data layout which will be called through a web api call per user, and then be converted to the structure in the js file.
</p>
<p class='hangingindent'>
Scroll down to see ng-repeat 3 deep. It uses the same data.
</p>
<hr />
<h3>AngularJS Nested ng-repeat 2 deep</h3>
<div ng-repeat="TempltMaster in MenuData">
Menu_Master_ID: {{TempltMaster.Menu_Master_ID}}
<br />
Menu_Master_Name: {{TempltMaster.Menu_Master_Name}}
<br />
<div ng-repeat="MenuDetail in TempltMaster.MenuDetails">
{{MenuDetail.Menu_Detail_ID}} - {{MenuDetail.Menu_Detail_Name}}
<br />
<b>Menu_Tasks:</b>
<br />
<ul>
<li ng-repeat="MenuTask in MenuDetail.MenuTasks">
{{MenuTask.Menu_Task_ID}} / {{MenuTask.Menu_Task_Name}}
</li>
</ul>
</div>
</div>
<hr />
<h3>AngularJS Nested ng-repeat 3 deep</h3>
<div ng-repeat="TempltMaster in MenuData">
Menu_Master_ID: {{TempltMaster.Menu_Master_ID}}
<br />
Menu_Master_Name: {{TempltMaster.Menu_Master_Name}}
<br />
<div ng-repeat="MenuDetail in TempltMaster.MenuDetails">
{{MenuDetail.Menu_Detail_ID}} - {{MenuDetail.Menu_Detail_Name}}
<br />
<b>Menu_Tasks:</b>
<br />
<ul>
<li ng-repeat="MenuTask in MenuDetail.MenuTasks">
{{MenuTask.Menu_Task_ID}} / {{MenuTask.Menu_Task_Name}}
<br />
<div ng-repeat="MenuTask2 in MenuTask.MenuCrumbs">
<ul>
<li>
{{MenuTask2.Menu_Crumb_ID}} / {{MenuTask2.Menu_Crumb_Name}}
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
p.hangingindent {
padding-left: 22px ;
text-indent: -22px ;
}