manyi/static/angular-mod/tpl/ui_tree.html

<div class="hbox hbox-auto-xs hbox-auto-sm" ng-controller="AbnTestController">
  <div class="col w-lg bg-light b-r bg-auto">
    <div class="wrapper-md">
      <button ng-click="try_changing_the_tree_data()" class="btn btn-default btn-block m-b">Change The Tree Definition</button>
      <button ng-click="try_async_load()" class="btn btn-default btn-block">Load Tree Data Asynchronously</button>
      <div class="line b-b line-lg"></div>
      <h5>Test the Tree Control API:</h5>
      <button ng-click="my_tree.select_first_branch()" class="btn btn-default btn-sm">First Branch</button>
      <div class="m-t-sm m-b-sm">
        <button ng-click="my_tree.select_next_sibling()" class="btn btn-default btn-sm">Next Sibling</button>
        <button ng-click="my_tree.select_prev_sibling()" class="btn btn-default btn-sm">Prev Sibling</button>
      </div>
      <div class="m-b-sm">
        <button ng-click="my_tree.select_next_branch()" class="btn btn-default btn-sm">Next Branch</button>
        <button ng-click="my_tree.select_prev_branch()" class="btn btn-default btn-sm">Prev Branch</button>
      </div>
      <button ng-click="my_tree.select_parent_branch()" class="btn btn-default btn-sm">Parent</button>
      <div class="m-t-sm m-b-sm">
        <button ng-click="my_tree.expand_branch()" class="btn btn-default btn-sm">Expand</button>
        <button ng-click="my_tree.collapse_branch()" class="btn btn-default btn-sm">Collapse</button>
      </div>
      <div class="m-t-sm m-b-sm">
        <button ng-click="my_tree.expand_all()" class="btn btn-default btn-sm">Expand All</button>
        <button ng-click="my_tree.collapse_all()" class="btn btn-default btn-sm">Collapse All</button>
      </div>
      <div class="line b-b line-lg"></div>
      <button ng-click="try_adding_a_branch()" class="btn btn-success btn-sm"><i class="fa fa-fw m-r-xs fa-plus"></i> Add Branch</button>
    </div>
  </div>
  <div class="col">
    <div class="wrapper-md">
      <div class="b-a bg-light dk r r-2x">
        <span ng-if="doing_async">...loading...</span>
        <abn-tree 
          tree-data         = "my_data" 
          tree-control      = "my_tree" 
          on-select         = "my_tree_handler(branch)" 
          expand-level      = "2" 
          initial-selection = "Granny Smith"
          icon-leaf         = "fa fa-file-o"
          icon-expand       = "fa fa-plus"
          icon-collapse     = "fa fa-minus"
          >
        </abn-tree>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="wrapper-md">
      <div class="alert alert-info">{{output}}</div>
    </div>
  </div>
</div>