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>A custom template with some spicy ASCII checkboxes. Defined inline via the <code>ivh-treeview-node-tpl</code> attribute.</p>
    <div ivh-treeview="demo.stuff"
         ivh-treeview-node-tpl="demo.tpl">
    </div>
  </div>
​
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
  <script src="//rawgit.com/iVantage/angular-ivh-treeview/master/dist/ivh-treeview.js"></script>
</body>
</html>
 
​
.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;
  
}
​
.custom-control-input {
    position: absolute;
    z-index: -1;
    opacity: 0;
​
}
​
.custom-control-label::before {
    position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;   
    background-color: yellow;
}
​
.custom-control-label::after {
    position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
}
​
.custom-checkbox-primaryblue .custom-control-label {
    outline: none;
    white-space: nowrap;
  position: relative;
    margin-bottom: 0;
    background-color: yellow;
}
​
​
.custom-control-input:checked + .custom-control-label::before {
  background-color:blue;
}
​
 
​
var stuff = [{
  label: '1',
  children: [
    {label: '2'},
    {label: '3'},
    {label: '4'},
    {label: '5'},
    {label: '6'}
  ]
},{
  label: '7',
  children: [
    {label: '8'},
    {label: '9'},
    {label: '10'},
    {label: '11'},
    {label: '12'}
  ]
}];
​
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: [
      '<div class="custom-control custom-checkbox-primaryblue">',
      '<input type="checkbox" class="custom-control-input" id="12">',
      '<label  class="custom-control-label" for="12">',
      '{{:: trvw.label(node)}}',
      '</label>',
      '</div>',
    ].join(''),
    link: function(scope, element, attrs) {
      element.on('click', function() {
        ivhTreeviewMgr.select(stuff, scope.node, !scope.node.selected);
        scope.$apply();
      });
    }
  };
});
​
app.controller('DemoCtrl', function() {
  this.stuff = stuff;
  
  this.tpl = [
    '<div>',
​
      '<ascii-box></ascii-box>',
      '<span class="ivh-treeview-node-label" ivh-treeview-toggle>',
      '</span>',
      '<div ivh-treeview-children></div>',
    '</div>'
  ].join('\n');
});
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers