Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ryandrewjohnson/angular-editme
Edit your AngularJS forms inline ala LinkedIn profiles
https://github.com/ryandrewjohnson/angular-editme
Last synced: 9 days ago
JSON representation
Edit your AngularJS forms inline ala LinkedIn profiles
- Host: GitHub
- URL: https://github.com/ryandrewjohnson/angular-editme
- Owner: ryandrewjohnson
- License: mit
- Created: 2016-03-08T20:44:42.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-01-28T03:48:06.000Z (almost 8 years ago)
- Last Synced: 2024-10-14T01:33:24.016Z (23 days ago)
- Language: JavaScript
- Homepage: http://ryandrewjohnson.github.io/angular-editme/
- Size: 1.4 MB
- Stars: 4
- Watchers: 3
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# angular-editme
Convert your AngularJS input and textarea elements to be edited inline ala [LinkedIn profiles](https://www.linkedin.com/).
## Demo
Check out a working example on the [demo page](http://ryandrewjohnson.github.io/angular-editme/).
## Installation
* `npm install angular-editme` or
* `bower install angular-editme` or
* `jspm install npm:angular-editme` or
* Download and add to your html file
## Usage
Add the `shaka-editme` module as a dependency to your Angular app's main module:
##### Installed with global:
```javascript
angular.module('app', ['shaka-editme']);
```
##### Installed with npm:
```javascript
let angular = require('angular');
angular.module('app', [require('angular-editme')]);
```
##### Installed with jspm:
```javascript
import editme from 'angular-editme';
angular.module('app', [editme]);
```
#### Basic example
To convert an existing input element into an editable element wrap it with the `` directive.
```html
...
```
The `` directive has the following requirements:
* It must wrap a single `` or `` element.
* The element wrapped element must have a valid `ng-model` attirbute.
#### Handling invalid input
An editable field in edit-state will remain so until a user enters a valid value. If a user enters an invalid or empty value the field will remain in the edit-state until a valid value is entered. The validity of the field is governed by the `ngModel` validators of the wrapped element.
##### Example:
Will validate user has entered valid email before exiting edit-state.
```html
```
Will validate user has entered only numbers before exiting edit-state.
```html
```
#### Interacting with directive from your Controller
Given markup styled with [Bootstrap](http://getbootstrap.com/css/#forms-control-validation) we can add the `has-error` class to the `form-group` element when the edmitme directive is invalid, and then remove it when the directive is valid.
index.html
```html
Email
```
demo.controller.js
```javascript
.controller('DemoController', function(userService) {
let vm = this;
vm.email = '[email protected]';
vm.isInvalid = false;
/**
* The value arg will be the current valid value from the input.
* (same as vm.email in this case)
*/
vm.onChange = (value) => {
vm.isInvalid = false;
userService.saveEmail(value);
};
/**
* The $error arg will be the input's ngModel $error object
* See $error in https://docs.angularjs.org/api/ng/type/form.FormController
*/
vm.onInvalid = ($error) => {
vm.isInvalid = true;
};
})
```
## API
All properties are optional.
```html
```
| Name | Type | Description | Default |
| ------------- |:---------------------| -------------| ------------|
| isEditing | Boolean | Can be set to true if you want to start in edit mode | false
| hideIcon | Boolean | Will hide pencil icon if set to true | false
| onChange | Expression(Function) | Expression will be evaluated when input loses focus and the entered value is both changed and valid. The valid value is available as $value. | –
| onInvalid | Expression(Function) | Expression will be evaluated when input loses focus and the entered value is invalid. The ngModel error is available as $error. | –
| onStateChange | Expression(Function) | Expression will be evaluated when the directive changes to and from edit mode. A Boolean value $isEditing is availble to determine the current state. | –