Git Product home page Git Product logo

ng-paste-from's Introduction

ng-paste-from

AngularJS directive that converts pasted plain text tabular data to an array of arrays/objects on the scope.

Demo

Try a demo of ng-paste-from.

Example HTML

<textarea
	id="excel-paste"
	ng-paste-from="users" 
	ng-paste-from-columns="['name', 'email']" 
	ng-paste-from-on-validate="onValidate"
	ng-paste-from-on-error="onError"></textarea>

NOTE: It is important that the element that has the ng-paste-from directive supports newlines, otherwise they get excluded and the parse becomes invalid.

Dependencies

Major version 3 depends on Angular ~1.3.11.

Major versions 1 and 2 depend on Angular ~1.2.6.

Attributes

ng-paste-from

  • Type: variable binding

The variable on the scope that should be assigned the parsed result.

The format of the parsed result depends on ng-paste-from-columns, look at that attribute for more information.

ng-paste-from-columns

Type: Array

  • Example: ng-paste-from-columns="['name', 'email']"
  • Parsed result: an array of row objects.
  • Parsed result example: [{"name": "a", "email": "[email protected]"},{"name": "b", "email": "[email protected]"}]

The arrays length becomes the number of columns expected by the parser.

Type: Number

  • Example: ng-paste-from-columns="2"
  • Parsed result: an array of row arrays (each array item is a column)
  • Parsed result example: [["a", "[email protected]],["b", "[email protected]"]]

It's the number of columns expected by the parser.

ng-paste-from-row-separator

  • Type: RegExp, String
  • Default value: /\r\n|\n\r|\n|\r/g

Used to split the pasted data into rows.

ng-paste-from-column-separator

  • Type: RegExp, String
  • Default value: "\t"

Used to split the rows into columns.

ng-paste-from-paste-only

  • Type: Boolean
  • Default value: true

Only allow pasting into the source element.

ng-paste-from-before-parse

  • Type: Function
  • Signature: beforeParse(data)
  • Return: the data, or else nothing will be parsed.

Callback to manipulate the data before it is parsed.

ng-paste-from-on-validate

  • Type: Function
  • Signature: onValidate(row, rowData)
  • Arguments:
    • row: (Object or Array) See the ng-paste-from-columns option for details on this value
    • rowData: (Object)
      • index: (Number, Int) Index of the row in the split source text, before trimming empty lines
      • source: (String) Row source text
      • expectedLength: (Number, Int) Expected number of columns in the row
      • actualLength: (Number, Int) Actual number of columns in the row

Callback to validate a row object or array.

See the ng-paste-from-columns attribute for more details on when a row will be an object or an array.

ng-paste-from-on-error

  • Type: Function
  • Signature: onError(error, rowData)
  • Arguments:
    • error: (String) Name of the error, see the Errors section of this README
    • rowData: (Object)
      • index: (Number, Int) Index of the row in the split source text, before trimming empty lines
      • source: (String) Row source text
      • expectedLength: (Number, Int) Expected number of columns in the row
      • actualLength: (Number, Int) Actual number of columns in the row

Callback to handle errors.

Errors passed to the on error callback

Error Description
NGPASTEFROM_INVALID_COLUMN_LENGTH The processed row does not have the correct number of columns
NGPASTEFROM_FAILED_VALIDATION The processed row failed validation

Getting started with development

  1. Install NodeJS (nodejs.org)
  2. Install Gulp globally: npm install -g gulp
  3. Fork the repo and clone it. (How to do it with GitHub.)
  4. Go into the project folder: cd ng-paste-from
  5. Install the project dependencies: npm install
  6. Build the project files: gulp
  • Build them whenever they change: gulp watch

To make development of ng-paste-from easier you can check out the master branch in one directory and the gh-pages branch in another, then symlink the dist files from master into the lib directory in gh-pages, and change the includes in index.html to use those versions.

Browser compatability

Chrome, Firefox, Safari and IE9+

License

Licensed under MIT

Copyright (C) 2014 DigiExam

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.