{{ mainTitle }}

Angular-xeditable is a bundle of AngularJS directives that allows you to create editable elements. Such technique is also known as click-to-edit or edit-in-place.
Angular-xeditable

It is based on ideas of x-editable but was written from scratch to use power of angular and support complex forms / editable grids.

Edit Text

To make element editable via textbox just add editable-text="model.field" attribute.

Select Local

To create editable select (dropdown) just set editable-select attribute pointing to model. To pass dropdown options you should define e-ng-options attribute that works like normal angular ng-options but is transfered to underlying <select> from original element.

Select Remote

To load select options from remote url you should define onshow attribute pointing to scope function. The result of function should be a $http promise, it allows to disable element while loading.

Textarea

To make element editable via textarea just add editable-textarea attribute pointing to model in scope. You can also wrap content into <pre> tags to keep linebreaks. Data can be submitted by Ctrl + Enter.

Checkbox

To make element editable via checkbox just add editable-checkbox attribute pointing to model in scope. Set e-title attribute to define text shown with checkbox.

Checklist

To create list of checkboxes use editable-checklist attribute pointing to model. Also you should define e-ng-options attribute to set value and display items.

Radiolist

To create list of radios use editable-radiolist attribute pointing to model. Also you should define e-ng-options attribute to set value and display items. By default, radioboxes aligned horizontally.

Typeahead

Basically it is normal editable-text control with additional e-typeahead attributes.
You should include additional ui-bootstrap-tpls.min.js:

Customize input

To define attributes for input (e.g. style or placeholder) you can define them on the original element with e-* prefix (e.g. e-style or e-placeholder). When input will appear these attributes will be transfered to it.

Trigger manually

To trigger edit-in-place by external button you should define e-form attribute. Value of it is the name of variable to be created in scope that allows you to show / hide editor manually.

{{ user.name || 'empty' }}
Hide buttons

To hide Ok and Cancel buttons you may set buttons="no" attribute. New value will be saved automatically after change.

Select multiple

Just define e-multiple attribute that will be transfered to select as multiple.