JSFiddle - React, Tailwind, and code Playground

by jamey777

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc9.js"></script>
<ul id="sg-navigation">
    <li class="sg-nav-main" data-ng-repeat="topic in topics2 | filter:{ parent:'none'}">
        <h2>{{topic.name}}</h2>
        <ul>
            <li class="sg-nav-sub" data-ng-repeat="subtopic in topics2 | filter:{ parent:topic.name}">
                <a href="#{{subtopic .url}}">{{subtopic .name}}</a>
            </li>
        </ul>
    </li>
</ul>

CSS

#sg-navigation {
    background-color: #eee;
    width: 100px;
    float: left;
    margin: 0px;
    padding: 1%;  
}
.sg-nav-main {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.sg-nav-main h2 
{
    font-size: 1.0em;
    margin: 0px;
    padding: .66em 0 0em 0;
}

.sg-nav-main ul {
    margin: 0px;
    padding-left: 1em;
}

.sg-nav-sub 
{
    line-height: 1.5em;
    font-size: .9em;
    list-style: none;
}

JavaScript

//angular.js example of nested categories
var app = angular.module('myApp', []);
    
app.run(function ($rootScope)
{
        $rootScope.topics2 = [

                    { "name": "Home", "url": "", "parent": "none" },
                    { "name": "Overview", "url": "/overview", "parent": "Home" },
                    { "name": "Resources", "url": "/resources", "parent": "Home" },
                    { "name": "Base Styles", "url": "", "parent": "none" },
                    { "name": "Typography", "url": "/base-styles/typography", "parent": "Base Styles" },
                    { "name": "Tables", "url": "/base-styles/tables", "parent": "Base Styles" },
                    { "name": "Global", "url": "/base-styles/global", "parent": "Base Styles" },
                    { "name": "Responsive", "url": "/base-styles/responsive", "parent": "Base Styles" },
                    { "name": "IE7", "url": "/base-styles/ie7", "parent": "Base Styles" }
            ];
});

function DefaultCtrl($scope, $rootScope, $filter)
{
    $scope.ctrl = "test from ctrl";
}