AngularJS - Render Tree list

by gavinfoley

HTML

<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.min.js"></script>
<div ng-app ng-controller="someCtrl">
    <nav>
    <ul>
        <li ng-repeat="item in menus" ng-cloak>
            <ng-switch on="item.menu != null">
                <span ng-switch-when="true">
                    <a ng-click="openMenu(item.menu.url)">{{item.menu.label}}</a>
                </span>
            </ng-switch>

            <ng-switch on="item.group != null">
                <span ng-switch-when="true"><div class="group">{{item.label}} :
                    <ul>
                        <li ng-repeat="subitem in item.group">
                            <ng-switch on="subitem.menu != null">
                                <span ng-switch-when="true"><a ng-click="openMenu(subitem.menu.url)">{{subitem.menu.label}}</a></span>
                            </ng-switch>
                        
                            <ng-switch on="subitem.group != null">
                                <span ng-switch-when="true"><div class="group">{{subitem.label}} :
                                    <ul>
                                        <li ng-repeat="subsubitem in subitem.group">
                                            <a ng-click="openMenu(subsubitem.menu.url)">{{subsubitem.menu.label}}</a>
                                        </li>
                                    </ul>
                                </div></span>
                
                            </ng-switch>
                        </li>
                    </ul>
                </div></span>
            </ng-switch>
        </li>
    </ul>
    </nav>
</div>

CSS

nav{
    width: 280px;
    margin: 10px;
}
nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
nav div.group {
    margin: 10px 0;
}
nav li {
    border: 0 none;
    padding: 1px 3px;
    list-style: none;
    margin-bottom: 4px;
}
nav ul ul li {
    padding-left: 20px;
}
nav a {
    display: block;
    margin: 0;
    cursor: pointer;
    padding: 2px 4px;
    background-color: #eee;
}
nav a:hover {
    text-decoration: underline;
    background-color: #eae;
}

JavaScript

function someCtrl ($scope) {
    
    var infoObj = 
        [
    {
        "label": "In the news",
        "group": [
            {
                "menu": {
                    "label": "News",
                    "url": "news.html"
                }
            },
            {
                "label": "Press Releases",
                "group": [
                    {
                        "menu": {
                            "label": "Recent",
                            "url": "press.html"
                        }
                    },
                    {
                        "menu": {
                            "label": "Archive",
                            "url": "press_archive.html"
                        }
                    }
                ]                
            }
        ]       
    },
    {
        "menu": {
            "label": "Our mission",
            "url": "mission.html"
        }
    },
    {
        "menu": {
            "label": "About us",
            "url": "about.html"
        }
    }
];

    $scope.menus = infoObj;
    $scope.openMenu = function(url){alert(url)};

};