AngularJS Datatype Editors (ADE)
ADE is a bunch of directives and filters for displaying and editing various types of data, using AngularJS. The typical way that we have seen this done is to have hidden input boxes that toggle to visible when clicked. The important difference with ADE is that the input box is created and destroyed only when needed, so the DOM is not filled with unused elements. This can be a benefit when you have lots of editable things on the page.
ADE requires jquery, bootstrap, and angular. You can find us on GitHub.
Install using bower:
bower install ADE
Or Download ZIP.
- Edit text in-line. There is no max length, but it is indented for short strings.
- A popup text area for editing large amounts of richly formatted text.
- A filter to make links clickable, and a way to edit them in place.
- A filter to make email address clickable to email, and a way to edit them in place.
- A filter to make a phone number clickable to call (on support devices) and a way to edit them in place.
- Formats a unix timestamp as a date (Jan 1, 2013) and provides a popup calendar for editing.
Date + Time
- Formats a unix timestamp as a date + time (Jan 1, 2013 11:45 am) and provides a popup calendar for editing.
- Formats a unix timestamp as a year (2013) and provides a popup calendar for editing.
- Formats an integer as a time of the day and provides a popup widget for edting the time.
- Formats a decimal as currency, rounded to 2 decimal places witha $ in front.
- Formats a decimal with a certain precision.
- Formats an integer.
- Formats an integer or a decimal depending on input.
- Formats a decimal as a percentage with an appended percent sign.
- Formats a number as a time duration (4hrs 24mins).
- Presents a popup list to choose one value from.
- Presents a popup list to choose multiple values from.
- Presents an integer as a specificed number of stars so you can rate things.
Toggle Icon (Star/Checkbox)
- A boolean that is represented as an image that can be toggled between two states.
- Toggle an icon between N states.
- An icon that can be switched between a number of different options with a popup editor.
Location - Displays a location with a popup map for editing.
QR Barcode - Displays a QR code with ability to edit encoded values.
Stock Price - Displays a stock with price. Price updates automatically.