ashgadala/ng-inline-edit

Simple inline editing for HTML elements

ng-inline-edit

Demo

Usage

Install ng-inline-edit via Bower:

bower install ng-inline-edit --production

Include main files:

<link rel="stylesheet" href="bower_components/ng-inline-edit/dist/ng-inline-edit.min.css">
<script src="bower_components/ng-inline-edit/dist/ng-inline-edit.min.js"></script>

Include angularInlineEdit module as a dependency into your app:

angular
  .module('yourApp', [
    'angularInlineEdit'
  ]);

Pass your model to inline-edit attribute on your HTML element and provide a callback function to listen changes:

<span inline-edit="yourModel"></span>
<!-- with optional attributes:
  inline-edit-callback="yourListener(newValue)"
  inline-edit-validation="yourValidator(enteredValue)"
  inline-edit-placeholder="Type a value..."
  inline-edit-filter="currency"
  inline-edit-btn-edit="Click to edit"
  inline-edit-btn-save="Save me"
  inline-edit-btn-cancel="Nevermind"
  inline-edit-on-blur="cancel" // 'cancel' or 'save'
  inline-edit-on-click
  inline-edit-textarea // uses <textarea> instead <input> & disables Enter key submit
-->

Development

See the instructions at ng-pack.

License

MIT http://tameraydin.mit-license.org/