vitalets / angular-xeditable

Edit in place for AngularJS

Angular-xeditable

Edit in place for AngularJS

Overview

Angular-xeditable is a bundle of AngularJS directives that allows you to create editable elements in your projects.
Such technique is also known as click-to-edit or edit-in-place.
It is based on ideas of x-editable but was written from scratch to use power of angular and support complex forms / editable grids.

Demo and docs

https://vitalets.github.io/angular-xeditable

Installation

Bower

bower install angular-xeditable

NPM

npm install angular-xeditable

Manual

Download latest version from project homepage.

Insert dependency

var app = angular.module("app", ["xeditable"]);

Usage with a Asset/Module Bundler

import angularXeditable from 'angular-xeditable';

angular.module('app', [angularXeditable]);

Dependencies

Basically it does not depend on any libraries except AngularJS itself.
For themes you may need to include Twitter Bootstrap CSS.
For some extra controls (e.g. datepicker) you may need to include angular-ui bootstrap for Bootstrap 2/3. Include ui-bootstrap4 for Bootstrap 4. To use ui-select you will need to include angular-ui ui-select. To use ngTagsInput you will need to include mbenford ngTagsInput. To use ui-date you will need to include angular-ui ui-date.

Reporting issues and Contributing

Please read our Contributor guidelines before reporting an issue or creating a pull request.

License

MIT

angular-xeditable's Issues

Inside <form> not working

Following not working..

<form>
   <a href="#" editable-text="user.name">{{ user.name | uppercase }}</a>
</form>

Selected items in multiple select

@vitalets
Hello
Please have a look at http://jsfiddle.net/F48Cy/

Maybe you know why selected items in regular select element are selected but in x-editable element are not.

The example was taken from http://code.angularjs.org/1.0.8/docs/api/ng.directive:select
Thanks

why no dependency on angular-ui?!

Well, i'm still new at angular area, but as i know there is a angular-ui - wrapper for bootstrap.

I'm sure for any RIA, developer will use angular-ui (if he already uses bootstrap). As i see your solution uses bootstrap too, but no any dependency on angular-ui. Are you sure that you will not reinvent wheel and no any code duplication between your solution and angular-ui?!

I mean, that your inline editing is cool, but for other UI features developer probably will use angular-ui, so both libraries will be included. And if we can reduce code, then why not?!

Your newer versions aren't showing up in bower for some reason

I'm new to the bower world, so there may be something I don't understand about the version number propagation process.

e-form not working $index in ng-repeat

I can't seem to get this working. I have the edittable controls in a ng-repeat and I am trying to get the e-form attribute to work based on the $index variable. In this example i am trying to hide an element based on whether the form is visible.

jade

ul
  li(ng-repeat="item in array")
    a(href="#", e-form="item_{{$index}}", editable-text="item.field") {{ item.field }}
    i(ng-show="!"+"_{{$index}}.$visible")

html

<ul>
  <li ng-repeat="item in array">
    <a href="#" e-form="item_{{$index}}" editable-text="item.field">{{ item.field }}</a>
    <i ng-show="!item_{{$index}}.$visible"></i>
  </li>
</ul>

Enhancement: support inline radio boxes

For small lists (say 2, 3 items) it's often better to display those items as a group of radio boxes rather than a select list (see screen shot attached).

It would be great if this was supported.

How do I: create fields that depends on each other

Hi,

I have two select local fields, were the content of one of them, should depend on the value of the other.

Eg: select 1: "Letters, "Digits"
Select 2: should contain "A","B","C" when select 1 is "Letters"
Select 2: should contain "1,"2","3" when select 1 is "Digits".

Is that possible to accomplish?

toggle edit mode by double-click

Custom input (several fields) from xeditable demo page

Is it possible to do something like the "Custom input, several fields" example from the xeditable demo page (http://vitalets.github.io/x-editable/demo-bs3.html) with the Angular version? If so, I could do with an example or some pointers for guidance... Thanks.

How to save form using Enter

Hello, how do I save the form data using "Enter"?

http://vitalets.github.io/angular-xeditable/#editable-row

Note: I apologize for the English.

Enhancement: Copy css class from editable-text onto the input

I want to control the size of the input's created when editing a form. To do this usually you would add a bootstrap 'input-xxx' class to the input.

I added the class to the editable-text tag expecting it to be copied to the input, but that was not the case.

Can this be added please?

Thanks in advance
Christian

allow rich text editor

WYSIWYG directive - easy to add?

Really nice work.

I was wondering if this can be extended to WYSIWYG.

http://vitalets.github.io/x-editable/demo.html?c=inline

I need that in one of my projects in an editable form. Is it easy to extend to few more widgets like WYSIWYG? If this is not something that you plan on doing, pointers to extending it would be appreciated.

Thanks!

Angular 1.2.0 and date

Hi,
There seems to be a problem using date with 1.2.0. see http://plnkr.co/edit/TCwo6u
TIA
John

Ability to leave edit mode when component loses focus whi buttons turned off?

Is there any way to leave edit mode when the component loses focus when the buttons are turned off? I'd like it to commit whatever has changed and go back to it's original state if the user clicks somewhere else on the page.

Great work on the component by the way!

Is there a way to decouple the editable-text attribute and input

Is there a way to decouple the editable-text attribute and the text that shows up in the input (edit box)?

I want the editable-text field to edit another field on the model and the input text to be a different field.

Is that possible?

themes' default property should be quoted

The property 'default' of the variable themes under editableThemes shoud be quoted.

For example, I use the play framework that processes javascript files (minification,running of the closure compiler), the process fails if the property is not quoted.

Editable table that allows add of record and switches entire table to edit mode

Hi Vitalets,

It's probably worth pulling out into a separate issue what I started to discuss in a previous issue. That is I would like to support the following scenario:

1. Click on the add row button
2. New row added to the table
3. Entire table, including new row, is in edit mode (without existing rows complaining they are invalid)
4. Focus is immediately on the first input in the newly added row
5. Repeat 1-4
6. Click Save and have all the changes saved to the database

I have actually got this scenario to work, but not without what feels like hacks.

Here's the jsfiddle with said hacks: http://jsfiddle.net/christianacca/gpgD4/

Surely there's better code than what I ended up writing. How would you write the code?

Thanks
Christian

Repeater seems to repeat on every gui change

I'm imlementing an editable row, similar to the demo on JSFiddle.

The repeater seems to be running every time you do a minor change in the gui. This is very heavy, and should not be necessary.

Example:

1. Choose to edit a row (the repeater is run)
2. If you type something in an input-field, whenever you hit a key, the repeater is executed.

I guess that the repeater should run whenever the model has changes - but during 1. or 2, the model has not changed.

That seems to be a lot of unnessesary dom updates - especially for large data tables.

Ive forked the original fiddle and changed a few lines of code (look for my two comments):

http://jsfiddle.net/schade/CuLrm/

Try to edit a row and type something in the "name" field. Whenever you hit a key the status text is changed!

Is this really necessary?

Can't edit values set by a promise

Check out this JSFiddle - http://jsfiddle.net/pP2jZ/1/

I'm assigning a user to the view, which Angular, through some black magic, handles, however when I use angular-xeditable to change the value, the original value is preserved, and my edit is lost.

No 'onbeforesave' or 'onaftersave' callback fires, so I can't intercept the save attempt and return a wrapped promise with the updated value.

I'm not gonna lie, I have no idea how this should be fixed, but, as Angular supports passing promises directly to views, I figured it was worth documenting this at least.

onaftersave not working after upgrade to 0.1.5

onaftersave does not work after upgrade to 0.1.5. any more. The function inside isn't called any more.
If I switch back to 0.1.4 it is working again. Tried to exclude some modules I use to see if one of those is the culprit. But no success. Which changes did you make compared to 0.1.4 or do you have any idea what might cause this issue?

Enhancement: provide a hook for onclose

There's onshow attribute which is great.

Even better if there was also a onclose attribute. Ideally the function expression registered with this onclose attribute would accept a boolean argument indicating whether or not the form was cancelled.

Thanks in advance
Christian

One/many opened elements at the same time

Have you planned to add such configuration or behaviour changes?

Thanks

Minimized build

Hi,
i have a issue with minimized build, maybe a Angular injection problem.

See: http://plnkr.co/edit/5HCEQKzJYQk9Ngfav6O9?p=preview

Can you confirm ? Do you want a pull-request ?

Thanks for your work

emptytext option required

When we remove all text ,It need empty word option.

Angular 1.2.0 rc2/3

Hi,
My test fails with 1.2.0.rc-2 and rc-3.
see http://plnkr.co/edit/mFVl7QVPwVJRoQwWMd6V?p=preview
Thanks for angular-xeditable, it's great!
John
Please ignore post in closed comment section.

Support `shown` for single element

Custom Template

Hi,
first thank you so much for bringing this to angular, it is awesome :)

is there a possibility to have the ability to add custom template?

right now, i need to add Redactor.js as editor, checklist, radio group, but the current implementation does not allow that. it would be great if we have ability to assign custom template and as long as the controls inside of it have binding to scope of controller, then hitting accept or cancel would just apply the new values.

sorry if i did not explain it well, but i think it should be like when user change values in the custom template controls, no real updates would happen, but if he clicks accept icon, then changes would be propagated, this would give a lot of flexibility and freedom.

thanks in advanced.

Option to select the text on focus

When the an element is clicked for entering into x-editable mode,
how to select all the text already present ?

There is a native javascript function to do [input].select()

I tried putting onshow="selectText()

and in selectText()

$("input).focus(function(){
    this.select();
});

But it did not work.

ReferenceError: arrayRemove is not defined

I'm on a page with a table using angular-xeditable:

• I go to the root page /
• An exception is thrown: ReferenceError: arrayRemove is not defined

line 457:

    $removeEditable: function(editable) {
      //todo: check
      arrayRemove(this.$editables, editable);
    },

onbeforesave not working

hello
edit form appear, but not working onbeforesave with angular 1.2.0-rc3
View part

<div ng-controller="GroupIndexCtrl">
     <a href="#" editable-text="group.name" onbeforesave="updateGroup($data)">
           {{ group.name }}
     </a>
</div>

and controller

App.controller 'GroupIndexCtrl', ($scope, $routeParams, Group) ->
  # updateName
  $scope.updateGroup = (data) ->
    alert('group')

thanks for any help

Add `editable-empty` class when value is empty

Possible to combine Editable Form and Editable Controls?

I'd like to find a way to have both an Editable Form with a top-level "Edit All" button which flips all children into edit mode, AND have manual "Edit" buttons next to each child control. Is this possible?

In shorthand:

<form editable-form>
  <div>
    <span editable-text>
    <button>Edit
  <div>
    <span editable-select>
    <button>Edit
  <div>
    <button>Edit All

ng-repeat + xeditable

Hey there,

is it possible to edit all placeholder elements in a ng-repeat which would get reflected in the $scope?

Thanks, cool project btw!
Alessandro

Saving does not work if JQuery was loaded before

When I include JQuery before x-editable,
the saving of changes to the angular model does not work.

By changing the include order (xeditable first, jquery second) everything works fine.

angular-xeditable - 0.1.5
jQuery v2.0.3

`e-*` attributes don't work with `data-e-*`

I use e-ng-options and as result have <select ta-e-ng-options=""></select>
The same situation with class <input type="text" ta-e-class="editableTitle">

types date and select2 are not ported to angular yet?

Was really looking forward for this angular support for a while, so thank you so much. I was wondering if you have plans to port the date and select2 as well in the near future. I have a project where I want to use this plugin to make the table editable and Select2 is a standard for all dropdowns in the application. We also have a date field in one of the columns and wanted to use the bootstrap datepicker as you have in the original x-editable implementation.

href confusion

Downloaded your code this morning and use it by including the css (editable.css) and js (xeditable.js) files. Further I fixed the 'arrayRemove reference error' error by adjusting the corresponding function in xeditable.js (BTW, the correct function is in editableFormController.js line 20).

Now after all errors are gone, when I click on the item that is marked as editable, I get forwarded to my homepage. My code is:

<a href="#" editable-select="stage.from.name" e-ng-options="stage.from.name for stage in tour.stages">{{ stage.from.name }}</a>

It seems that the href=# is overwritten or not recognized. What can I do/try here? I am a little bit confused.

Only works with angularjs >= 1.2.0 ?

Hi,
first thanks for adapting x-editable to angular, it will really ease the integration of x-editable.
I've tried it out and it seems that it only works with angularjs >=1.2.0 (see http://plnkr.co/edit/zHJM2oJlFKe1mNbBd1zT?p=preview)

Is it intentional?

Setting default value

In the original Xeditable, you could pass "data-value" to define the default value of an array of options. I tried passing it to Angular Xeditable via "e-data-value" but it does not render the option as selected.

How should I get this to work?

Is it possible to toggle edit mode on and off?

Angular using jquery breaks x-editable

If jquery is included before angular then you can click to edit the text and it will switch to the edit mode but it won't save the changes and if you click to somewhere else in the text box it will automatically close.

Here is a simple example:

<!DOCTYPE html>
<html>
<head>
    <title>Report</title>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
    <script type='text/javascript' src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
</head>

<body ng-app="reportApp">
  <div ng-controller="TextSimpleCtrl">
    <a href="#" editable-text="user.name">{{ user.name || 'empty' }}</a>
  </div>

  <script>
    var app = angular.module('reportApp', ["xeditable"])
        // .run(function(editableOptions) {
        //     editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
        // })
      .controller('TextSimpleCtrl', function($scope) {
        $scope.user = {
          name: 'awesome user'
        };
      });
  </script>
</body>
</html>

If you move jquery below angular so angular doesn't use it then everything works fine. In my case I'm also using ui-sortable which requires Angular to use jquery and jquery-ui to work (https://github.com/angular-ui/ui-sortable).

Thanks, and otherwise love the x-editable control.

Enhancement: Option to trigger onbeforesave on input/change event to perform validation

Using an editable table or editable row, I would like to validate the input from the user as soon as they are typing. This is to keep things consistent with how angular works where forms validation is triggered on the input as they're typing.

All I can think of to support this is another hook similar to the blur attribute:

oninput: onbeforesave | ignore

Thanks
Christian

timepicker

Normally you use timepicker (http://angular-ui.github.io/bootstrap/) like this:

<div ng-model="mytime" ng-change="changed()">
    <timepicker hour-step="1" minute-step="1" show-meridian="false"></timepicker>
</div>

In order to make it xeditable, I tried to write the directive like this:

//timepicker
angular.module('xeditable').directive('editableTime', [ 'editableDirectiveFactory', function(editableDirectiveFactory) {
    return editableDirectiveFactory({
        directiveName : 'editableTime',
        inputTpl : '<timepicker hour-step="1" minute-step="1" show-meridian="false"><timepicker>'
    });
} ]);

For xeditable I use it like this:

<a href="#" editable-time="stage.mytime" onaftersave="updateStage(stage, stage.departure)">
{{getTime(stage.departure.hour, stage.departure.minute)}}
</a>

Does it make sense (because it does not work as expected)?

pure angular-style tooltip

Hi you once said that it would be nice to find some "pure angular-style tooltip" to fork in order to be able to wrap things in popups. Maybe this http://mgcrea.github.io/angular-strap/#/popover or https://github.com/angular-ui/bootstrap/tree/master/src/tooltip is helpful?

Inline edit without the "OK" and "Cancel" buttons

Hi,
Is there an option to automatically update value in a model without confirmation step?
It would be cool to hide those 2 buttons.

Bug: form never marked as dirty

The standard Angular behaviour for forms is that if any of it's child controls become $dirty then the form itself is also considered $dirty. The ng-pristine is removed and the ng-dirty class is added to the form and specific dirty children.

Upon testing the editable-form tag is not receiving its ng-dirty attribute when a child editable-input becomes dirty.

Christian

manual trigger button disappears if ESC is pressed

To reproduce:

go to http://vitalets.github.io/angular-xeditable/#text-btn
click [edit]
press ESC key
-> [edit] button is no longer displayed

Editable-form inside directive, editable-inputs not registering

http://plnkr.co/edit/kQjY6FXjSYi6gL1UuaZ9?p=preview

I have several views which have identical controls. I have put html for controls in one file which I want to include in each view using ng-include or directive.

There, however, seems to be some problem with form not registering the inputs.

setWaiting function overrides ng-disabled and ng-enabled

Using ng-disabled or ng-enabled on an editable field does not works, the setWaiting function is overriding the ng-disabled directive.

I think you could set the inWaiting flag to true, only if it has been set statically, or no other directive can update the 'disabled' attribute.

I think if the user wants to use the ng-disabled or ng-enabled directive he should also be responsible to check the $waiting flag himself like: e-ng-disabled='disabled || form.$waiting'.

It is not the cleanest way, but this patch works for me:

inWaiting = !self.inputEl.attr('disabled') &&
                 !self.inputEl.attr('ng-disabled') &&
                 !self.inputEl.attr('ng-enabled');