Tree Browser Demo

this fiddle allows you to play with ad-tree-browser directive

by Danny Michaelis

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.19/angular-sanitize.js"></script>
<script src="http://adaptv.github.io/adapt-strap/dist/adapt-strap.js"></script>
<script src="http://adaptv.github.io/adapt-strap/dist/adapt-strap.tpl.js"></script>
<link rel="stylesheet" href="http://adaptv.github.io/adapt-strap/dist/adapt-strap.css">
<div ng-app="adaptv.adaptStrapDocs" ng-controller="treebrowserCtrl">
    <!-- ===== template files ===== -->
    <script type="text/ng-template" id="src/treebrowser/docs/treeHeader.html">
        <div>
            <span class="name-cell pull-left">Name</span>
            <span class="another-cell pull-left">Another Cell</span>
            <span class="pull-right margin-right-lg">Price Range</span>
        </div>
    </script>
    <script type="text/ng-template" id="src/treebrowser/docs/treeNode.html">
        <div>
    <div class="col-sm-6 text-left">
        {{item.name }}
    </div>
    <div class="col-sm-3 text-right">Another Cell</div>
    <div class="col-sm-3 text-right">
      <a href=""
         ng-click="carSelected(item)">
        {{ item.priceRange }}
      </a>
    </div>
</div>
    </script>
    
    <!-- ===== Usage with border & header ===== -->
    <p>With Border &amp; header</p>
    <ad-tree-browser class="ad-border-default"
                     tree-name="treeDemoBordered"
                     row-ng-class="{added:item._selected}"
                     tree-root="root"
                     child-node="children"
                     children-padding="15"
                     bordered="true"
                     node-header-url="src/treebrowser/docs/treeHeader.html"
                     node-template-url="src/treebrowser/docs/treeNode.html">
    </ad-tree-browser>
</div>

CSS

.name-cell {
    width: 100px;
    text-align: left;
}

.another-cell {
    margin-left: 10px;
    color: lightseagreen;
}

JavaScript

// ========== initialize documentation app module ========== //
angular.module('adaptv.adaptStrapDocs', [
  'ngSanitize',
  'adaptv.adaptStrap'
])

// ========== controllers ========== //
.controller('treebrowserCtrl', ['$scope', function ($scope) {
    $scope.root = {
      children: [
        {
          name: 'Bmw',
          priceRange: '30k to 200k',
          children: [
            {
              name: '328i',
              priceRange: '30k to 40k'
            },
            {
              name: '335i',
              priceRange: '35k to 47k'
            },
            {
              name: '535i',
              priceRange: '40k to 50k'
            }
          ]
        },
        {
          name: 'Audi',
          priceRange: '30k to 200k',
          children: [
            {
              name: 'A4',
              priceRange: '30k to 55k',
              children: [
                {
                  name: 'Quattro premium plus',
                  priceRange: '35k to 49k'
                },
                {
                  name: 'Quattro Prestige',
                  priceRange: '45k to 55k'
                },
                {
                  name: 'FWD',
                  priceRange: '35k to 40k'
                }
              ]
            },
            {
              name: 'A6',
              priceRange: '45k to 60k'
            },
            {
              name: 'A8',
              priceRange: '60k to 80k'
            }
          ]
        },
        {
          name: 'Honda',
          priceRange: '15k to 50k',
          children: [
            {
              name: 'Civic',
              priceRange: '15k to 20k'
            },
            {
              name: 'Accord',
              priceRange: '25k to 35k'
            },
            {
              name: 'CRV',
              priceRange: '25k to 35k'
            }
          ]
        }
      ]
    };
    
    // ========== ui handlers ========== //
    $scope.carSelected = function...