JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<!--
angular-paste © 2013 Varun Chatterji, used under a Creative Commons Attribution-ShareAlike license: http://creativecommons.org/licenses/by-sa/3.0/
See it at Git:
https://github.com/vchatterji/angular-paste
Borrows ideas from:
https://github.com/mleibman/SlickGrid
-->
<div ng-cloak ng-app="myApp">
<div ng-controller="PasteController">
<!--
After paste, scope variable specified by ng-model will contain raw pasted text
Scope variable specified by ng-array will contain an array of arrays of the
tabular data
-->
<angular-paste ng-model="rawPaste" ng-array="parsedPaste"/>
<table class="table table-striped table-bordered">
<tr ng-repeat="row in parsedPaste">
<td ng-repeat="col in row">{{col}}</td>
</tr>
<tr ng-show="parsedPaste.length==0">
<td>Paste data from excel onto this page using Ctrl + V</td>
</tr>
</table>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
CSS
[ng-cloak] {
display: none;
}
JavaScript
// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.directives'])
.controller('PasteController', ['$scope', function ($scope) {
$scope.rawPaste = '';
$scope.parsedPaste = [];
}]);
angular.module('myApp.directives', [])
.directive('angularPaste', ['$parse', '$document',
function ($parse, $document) {
return {
restrict:'E',
link:function (scope, element, attrs) {
//We do not want to eat up chars if some text box is focussed
//this variable will be set to true if focus is currently on
//a textbox
var inFocus = false;
function parseTabular(text) {
//The array we will return
var toReturn = [];
try {
//Pasted data split into rows
var rows = text.split(/[\n\f\r]/);
rows.forEach(function (thisRow) {
var row = thisRow.trim();
if (row != '') {
var cols = row.split("\t");
toReturn.push(cols);
}
});
}
catch (err) {
console.log('error parsing as tabular data');
console.log(err);
return null;
}
return toReturn;
}
function textChanged() {
var text = $('#myPasteBox').val();
if (text != '') {
//We need to change the scope values
scope.$apply(function () {
if (attrs.ngModel != undefined && attrs.ngModel != '') {
$parse(attrs.ngModel).assign(scope, text);
...