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 data-ng-app="app">
<head>
  <!-- ngHandsontable resources only included for demo purposes - it is NOT required by angular-simple-handsontable otherwise -->
  <base href="http://handsontable.github.io/ngHandsontable/bower_components/">
  <link rel="stylesheet" href="handsontable/dist/handsontable.full.css">
  <script src="angular/angular.js"></script>
  <script src="handsontable/dist/handsontable.full.js"></script>
  <script src="https://rawgit.com/neam/angular-simple-handsontable/develop/angular-simple-handsontable.js"></script>
  <script>
    // To be able to use ngHandsontable's dataFactory in jsbin, a stub ngHandsontable module needs to be declared
    angular.module('ngHandsontable', []);
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  <!-- demo helpers -->
  <script src="../demo/js/services/dataFactory.js"></script>
  <meta charset="utf-8">
</head>
<body data-ng-controller="MainCtrl as ctrl">
  
  <h1>angular-simple-handsontable.js</h1>
​
  <h2>Dynamic settings update</h2>
  minSpareRows:
  <input ng-model="ctrl.settings.minSpareRows">
  rowHeaders:
  true <input type="radio" ng-model="ctrl.settings.rowHeaders" ng-value="true">
  false <input type="radio" ng-model="ctrl.settings.rowHeaders" ng-value="false">
  <button ng-click="ctrl.addColumn()">Add column</button>
  <button ng-click="ctrl.removeColumn()">Remove column</button>
  
  <h2>Two-way deep data binding</h2>
  <p>Changes shows up immediately only in tables that have deep watch active. Using deep watch is the default, but less performant on large datasets, so to turn off deep watch for larger datasets if you find your app sluggish. </p>
  <input ng-model="ctrl.db.items[0].address">
  
  <h2>Handsontable 1 (deep watch)</h2>
  <simple-handsontable
      settings="ctrl.settings"
      data="ctrl.db.items">
  </simple-handsontable>
  
  <h2>Handsontable 2 (shallow watch)</h2>
  <simple-handsontable
      settings="ctrl.settings"
      data="ctrl.db.items"
      deep-watch="false">
  </simple-handsontable>
  
  <pre> 
  {{ ctrl.db.items | json }}
  </pre>
  
  <pre>
  {{ ctrl.settings | json }}
  </pre>
  
</body>
</html>
 
body {
  margin: 2em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1em;
  color: #333333;
  background-color: #ffffff;
}
​
a {
  color: #0088cc;
  text-decoration: none;
}
​
 
function MainCtrl(dataFactory, $timeout) {
  var self = this;
  this.minSpareRows = 1;
  this.rowHeaders = false;
​
  this.db = {items: dataFactory.generateArrayOfObjects()};
  this.columns = [
    {
      data: 'id',
      title: 'ID'
    },
    {
      data: 'name.first',
      title: 'First Name',
      readOnly: true,
    },
    {
      data: 'name.last',
      title: 'Last Name',
      readOnly: true,
    },
    {
      data: 'address',
      title: 'Address',
      width: 150,
    },
    {
      data: 'product.description',
      title: 'Favorite food',
      type: 'autocomplete'
    },
    {
      data: 'price',
      title: 'Price',
      type: 'numeric',
      width: 80,
      format: '$ 0,0.00'
    },
    {
      data: 'isActive',
      title: 'Is active',
      type: 'checkbox',
      checkedTemplate: 'Yes',
      uncheckedTemplate: 'No'
    },
  ];
  this.settings = {
    colHeaders: true, 
    contextMenu: ['row_above', 'row_below', 'remove_row'],
    minSpareRows: this.minSpareRows,
    rowHeaders: this.rowHeaders,
    columns: this.columns,
    height: 300,
    width: 700
  };
  
  this.addColumn = function() {
    this.settings.columns.push({});
  };
  this.removeColumn = function() {
    this.settings.columns.pop();
  };
  
  // For autocomplete
  this.currentItemId = null;
  this.settings.afterSelectionEnd = function(r,c,r2,c2){
    // Keep track of the currently selected item's id
    self.currentItemId = this.getDataAtCell(r,0);
  };
  this.columns[4].source = function (query, process) {
    var currentItem = _.find(self.db.items, function(item) {
      console.log('find', item.id, self.currentItemId);
      return item.id === self.currentItemId;
    });
    var options = _.pluck(currentItem.product.options, 'description');
    process(options);
  };
  
}
​
MainCtrl.$inject = ['dataFactory', '$timeout'];
​
angular
  .module('app', ['simpleHandsontable', /* ngHandsontable stub module only included for the dataFactory service: */ 'ngHandsontable'])
  .controller('MainCtrl', MainCtrl);
​
​
​
Output

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

Dismiss x
public
Bin info
motinpro
0viewers