vitalets / angular-xeditable Goto Github PK
View Code? Open in Web Editor NEWEdit in place for AngularJS
Home Page: http://vitalets.github.io/angular-xeditable
License: MIT License
Edit in place for AngularJS
Home Page: http://vitalets.github.io/angular-xeditable
License: MIT License
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.
@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
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">
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
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?
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.
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.
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!
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.
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!
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?!
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?
To reproduce:
go to http://vitalets.github.io/angular-xeditable/#text-btn
click [edit]
press ESC key
-> [edit] button is no longer displayed
When we remove all text ,It need empty word option.
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.
Hello, how do I save the form data using "Enter"?
http://vitalets.github.io/angular-xeditable/#editable-row
Note: I apologize for the English.
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
Hi,
There seems to be a problem using date with 1.2.0. see http://plnkr.co/edit/TCwo6u
TIA
John
I'm on a page with a table using angular-xeditable:
/
ReferenceError: arrayRemove is not defined
line 457:
$removeEditable: function(editable) {
//todo: check
arrayRemove(this.$editables, editable);
},
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
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.
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>
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');
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
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)?
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?
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
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:
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
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?
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.
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?
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?
Following not working..
<form>
<a href="#" editable-text="user.name">{{ user.name | uppercase }}</a>
</form>
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
Hi,
Is there an option to automatically update value in a model without confirmation step?
It would be cool to hide those 2 buttons.
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.
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.
I'm new to the bower world, so there may be something I don't understand about the version number propagation process.
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
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.
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
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:
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?
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.