Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link rel="stylesheet" href="//rawgit.com/iVantage/angular-ivh-treeview/master/dist/ivh-treeview.css">
  <link rel="stylesheet" href="//rawgit.com/iVantage/angular-ivh-treeview/master/dist/ivh-treeview-theme-basic.css">
</head>
<body ng-app="bin">
  
  <div ng-controller="DemoCtrl as demo">
    <h3>Custom Node Templates</h3>
    <p>Custom labels with HTML</p>
    <div ivh-treeview="demo.stuff">
      <script type="text/ng-template">
        <span ivh-treeview-toggle>
          <span ivh-treeview-twistie></span>
        </span>
        <ascii-box></ascii-box>
        <span class="ivh-treeview-node-label" ivh-treeview-toggle>
          <span ng-bind-html="trvw.label(node)"></span>
        </span>
        <div ivh-treeview-children></div>
      </script>
    </div>
  </div>
​
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-sanitize.js"></script>
  <script src="//rawgit.com/iVantage/angular-ivh-treeview/master/dist/ivh-treeview.js"></script>
</body>
</html>
 
.ascii-box {
  cursor: pointer;
  font-family: monospace;
}
​
.x {
  color: red;
}
​
.y {
  color: green;
}
 
console.clear();
​
var stuff = [{
  label: 'Hats',
  children: [
    {label: 'Flat <i>cap</i>'},
    {label: 'Fedora'},
    {label: 'Base<span style="color:red">ball</span>', selected: true},
    {label: 'Top hat'},
    {label: '<a href="javascript:alert(\'hi\')">Gatsby</a>'}
  ]
}];
​
var app = angular.module('bin', ['ivh.treeview']);
​
app.config(function(ivhTreeviewOptionsProvider) {
 ivhTreeviewOptionsProvider.set({
   defaultSelectedState: false,
   validate: true,
   expandToDepth: -1
 });
});
​
app.directive('asciiBox', function(ivhTreeviewMgr) {
  return {
    restrict: 'AE',
    template: [
      '<span class="ascii-box">[',
        '<span ng-show="node.selected" class="x">x</span>',
        '<span ng-show="node.__ivhTreeviewIndeterminate" class="y">~</span>',
        '<span ng-hide="node.selected || node.__ivhTreeviewIndeterminate"> </span>',
      ']</span>',  
    ].join(''),
    link: function(scope, element, attrs) {
      element.on('click', function() {
        ivhTreeviewMgr.select(stuff, scope.node, !scope.node.selected);
        scope.$apply();
      });
    }
  };
});
​
app.controller('DemoCtrl', function(ivhTreeviewBfs, $sce) {
  ivhTreeviewBfs(stuff, function(n) {
    n.label = $sce.trustAsHtml(n.label);
  });
  
  this.stuff = stuff;
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jtrussellpro
0viewers