Angulat Nav Tree

Navigation tree

by Urigo

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-app="app" ng-controller="app.Ctrl">
<ul>
    <li ng-repeat="s in dto.Superheroes">
            <span ng-click="selectHero(s)">{{s.NAME}}</span>
        <ul ng-show="dto.heroId == s.ID">
            <li class="subnav" ng-repeat="p in s.Powers"
                ng-click="selectPower(p)"
                ng-class="dto.powerId == p.ID && 'selected'">
                {{p.NAME}}
            </li>
        </ul>
    </li>
</ul>    
    
<pre>    
{{dto | json}}
</pre>    
</div>

CSS

.subnav{margin-left:1em;}
.selected{color:red;}
li{cursor:pointer;}

JavaScript

var app = angular.module('app', []);

app.Ctrl = function($scope) {

    $scope.dto = {};
    $scope.dto.heroId = 0;
    $scope.dto.powerId = 0;

    $scope.selectHero = function(s) { 
        $scope.dto.heroId = s.ID;
        $scope.dto.powerId = 0;
    };

    $scope.selectPower = function(p) {
        $scope.dto.powerId = p.ID;
    };

    $scope.dto.Superheroes = [
        {
        "ID": 1,
        "NAME": "Superhero One",
        "Powers": [{
            "ID": 1,
            "NAME": "Special Power One"},
        {
            "ID": 3,
            "NAME": "Special Power Three"},
        {
            "ID": 5,
            "NAME": "Special Power Five"}]},
    {
        "ID": 2,
        "NAME": "Superhero Two",
        "Powers": [
            {
            "ID": 2,
            "NAME": "Special Power Two"},
        {
            "ID": 3,
            "NAME": "Special Power Three"},
        {
            "ID": 4,
            "NAME": "Special Power Four"}]}
    ];

    console.log($scope.dto);

};