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>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <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">
  <meta charset="utf-8">
  <title>Angular JS</title>
</head>
<body ng-app="jsbin">
  <div class="container">
    <div ng-controller="DemoCtrl as demo">
      <h1>Hello World!</h1>
      <p class="alert alert-info">
        The <strong>ivh.treeview</strong> module provides a directive for rendering tree-like collections. It supports checkboxes and deep filtering. By default we use basic (+)/(-) for twisties but that's all configurable.
      </p>
      <input type="text" ng-model="bagSearch" class="form-control" placeholder="Find stuff in your bag..." style="">
      <div ivh-treeview="demo.bag"
           ivh-treeview-filter="bagSearch"
           ivh-treeview-expand-to-depth="1"></div>
      
      <div class="row">
        <div class="col-md-6">
          <h4>All Selected Things</h4>
          <ul>
            <li ng-repeat="item in demo.allSelected">
              {{item}}
            </li>
          </ul>
          <p ng-hide="demo.allSelected.length"><em>Nothing selected yet</em></p>
        </div>
        <div class="col-md-6">
          <h4>Top Selected Things</h4>
          <ul>
            <li ng-repeat="item in demo.topSelected">
              {{item}}
            </li>
          </ul>
          <p ng-hide="demo.topSelected.length"><em>Nothing selected yet</em></p>
        </div>
      </div>
    </div>
  </div>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js"></script>
  <script src="//rawgit.com/iVantage/angular-ivh-treeview/master/dist/ivh-treeview.min.js"></script>
</body>
</html>
 
/*jshint laxcomma:true */
console.clear();
​
var app = angular.module('jsbin', ['ivh.treeview']);
​
app.controller('DemoCtrl', function($scope, ivhTreeviewBfs) {
  var self = this;
  
  var things = [
    'Mustachio',
    'Cane',
    'Monacle',
    'Umbrella',
    'Headphones',
    'Top hat',
    'Fedora',
    'Flat cap',
    'Phone',
    'Wallet',
    'Squirrel',
    'Wizard hat',
    'Great sword',
    'Playing cards',
    'Post-it notes',
    'Stickers',
    'Tea',
    'Patch'
  ];
  
  var getThing = function() {
    return things[Math.floor(Math.random()*100)%things.length];
  };
  
  var makeThings = function(numChildren, depth) {
    if(depth < 1) { return; }
    
    var c, ret = {
      label: getThing(),
      children: []
    };
    
    for(var ix = numChildren; ix--;) {
      c = makeThings(numChildren, depth-1);
      if(c) {
        ret.children.push(c);
      }
    }
    
    if(!ret.children.length) {
      delete ret.children;
    }
    
    return ret;
  };
  
  var makeNode = function(label) {
    return {
      label: label,
      children: []
    };
  };
  
  var makeTree = function(list, arity) {
    list = list.slice(0);
    var node = makeNode(list.shift())
      , nodes = [node]
      , tree = [node];
    while(list.length && nodes.length) {
      node = nodes.shift();
      while(list.length && node.children.length < arity) {
        node.children.push(makeNode(list.shift()));
      }
      Array.prototype.push.apply(nodes, node.children);
    }
    return tree;
  };
  
  var bag = self.bag = makeTree(things, 4);
  
  self.gatherAllSelected = function() {
    self.allSelected.length = 0;
    ivhTreeviewBfs(bag, function(node, parents) {
      if(node.selected) {
        self.allSelected.push(node.label);
      }
    });
  };
  
  self.gatherTopmostSelected = function() {
    self.topSelected.length = 0;
    ivhTreeviewBfs(bag, function(node, parents) {
      if(node.selected) {
        self.topSelected.push(node.label);
        return false; // Stops traversal of this branch
      }
    });
  };
  
  self.allSelected = [];
  self.topSelected = [];
  
  $scope.$watch(function() {
    return bag;
  }, function() {
    self.gatherAllSelected();
    self.gatherTopmostSelected();
  }, true);
});
​
​
Output

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

Dismiss x
public
Bin info
jtrussellpro
0viewers