html
<div ng-controller="TextSimpleCtrl">
- <a href="#" editable-text="user.name">{{ user.name || 'empty' }}</a>
+ <a href="#" editable-text="user.name" e-label="User Name">{{ user.name || 'empty' }}</a>
</div>
controller.js
app.controller('TextSimpleCtrl', function($scope) {
@@ -282,7 +284,8 @@ demo
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.
+that works like normal angular ng-options but is transfered to underlying <select> from original element.
+To set a default option in the list add the e-placeholder attribute.
html
@@ -462,6 +468,7 @@ html
<div>Month: <a href="#" editable-month="user.month">{{ (user.month | date: "yyyy-MM") || 'empty' }}</a></div>
<div>Week: <a href="#" editable-week="user.week">{{ (user.week | date: "yyyy-Www") || 'empty'}}</a></div>
<div>Password: <a href="#" editable-password="user.password">{{ user.password || 'empty' }}</a></div>
+ <div>Datetime-local: <a href="#" editable-datetime-local="user.datetimeLocal">{{ (user.datetimeLocal | date: "yyyy-MM-ddTHH:mm:ss") || 'empty' }}</a></div>
</div>
controller.js
app.controller('Html5InputsCtrl', function($scope) {
@@ -478,7 +485,8 @@ controller.js
datetime: null,
month: null,
week: null,
- password: 'password'
+ password: 'password',
+ datetimeLocal: null
};
});
@@ -623,7 +631,7 @@ Radiolist
demo
@@ -653,7 +661,7 @@ demo
$scope.$watch("user", function(v) { $scope.$parent.debug["radiolist"]=v; }); });
html
<div ng-controller="RadiolistCtrl">
- <a href="#" editable-radiolist="user.status" e-ng-options="s.value as s.text for s in statuses">
+ <a href="#" editable-radiolist="user.status" e-ng-options="s.value as s.text for s in ::statuses track by s.value">
{{ showStatus() }}
</a>
</div>
@@ -685,11 +693,10 @@ demo
Date control is implemented via Angular-ui bootstrap datepicker.
You should include additional ui-bootstrap-tpls.min.js:
-<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.4/ui-bootstrap-tpls.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.1/ui-bootstrap-tpls.min.js"></script>
Add ui.bootstrap as module dependency:
var app = angular.module("app", ["xeditable", "ui.bootstrap"]);
-And set editable-bsdate attribute in editable element.
-Other parameters can be defined via e-* syntax, e.g. e-datepicker-popup="dd-MMMM-yyyy".
+And set editable-bsdate attribute in editable element.
To make the input field read-only and force the date to be selected from the popup, add the e-readonly="true" attribute.
Add e-ng-change attribute to call a function when the value of the datepicker is changed.
To hide the calendar button and display the calendar popup on click of the input field, set the e-show-calendar-button attribute to false.
Other parameters can be defined via e-* syntax, e.g. e-datepicker-popup="dd-MMMM-yyyy".
html
<div ng-controller="TextCustomizeCtrl">
- <a href="#" editable-text="user.name" e-style="color: green" e-required e-placeholder="Enter name">
+ <a href="#" editable-text="user.name" e-style="color: green" e-required e-placeholder="Enter name" e-formclass="class1 class2">
{{ (user.name || 'empty') | uppercase }}
</a>
</div>
@@ -1246,6 +1252,64 @@ controller.js
});
return d.promise;
};
+});
+
+
+ Disable editing
+
+ demo
+
+ {{ debug["edit-disabled"] | json }}
+ To disable an element from being editable, just add the edit-disabled="true" attribute. Additionally, you can disable all elements at a global level by setting editableOptions.isDisabled=true.
+
+
+
+ html
+ <div ng-controller="EditDisabledCtrl">
+ <a href="#" editable-text="user.name" edit-disabled="{{user && user.name == 'awesome user'}}">{{user.name || 'empty' }}</a>
+</div>
+ controller.js
+ app.controller('EditDisabledCtrl', function($scope) {
+ $scope.user = {
+ name: 'awesome user'
+ };
+});
+
+
+ Editable Popover
+
+ demo
+
+ {{ debug["editable-popover"] | json }}
+ To made an editable field display in a popover, wrap the editable in <div class="item-wrapper">.
+
+
+
+ html
+ <div ng-controller="EditPopoverCtrl">
+ <div class="popover-wrapper">
+ <a href="#" editable-text="user.name">{{user.name || 'empty' }}</a>
+ </div>
+</div>
+ controller.js
+ app.controller('EditPopoverCtrl', function($scope) {
+ $scope.user = {
+ name: 'awesome user'
+ };
});
@@ -1437,6 +1501,7 @@ demo
-
+
{{ user.name || 'empty' }}
|
@@ -1720,7 +1785,7 @@ html
<tr ng-repeat="user in users">
<td>
<!-- editable username (text with validation) -->
- <span editable-text="user.name" e-name="name" e-form="rowform" onbeforesave="checkName($data, user.id)" e-required>
+ <span editable-text="user.name" e-name="name" e-form="rowform" onbeforesave="checkName($data, user.id)">
{{ user.name || 'empty' }}
</span>
</td>
@@ -2644,7 +2709,8 @@ Methods
Methods are available when you set name attribut
$activate(name) |
name (string) name of field
|
- Sets focus on form field specified by name.
+ | Sets focus on form field specified by name.
+When trying to set the focus on a form field of a new row in the editable table, the $activate call needs to be wrapped in a $timeout call so that the form is rendered before the $activate function is called.
|
diff --git a/package.json b/package.json
index 964d0fc6..4512d5ef 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "angular-xeditable",
"description": "Edit-in-place for angular.js",
- "version": "0.1.12",
+ "version": "0.2.0",
"homepage": "https://vitalets.github.io/angular-xeditable",
"author": {
"name": "Vitaliy Potapov",
diff --git a/starter/angular-xeditable/css/xeditable.css b/starter/angular-xeditable/css/xeditable.css
index 8919a903..ae9d4642 100644
--- a/starter/angular-xeditable/css/xeditable.css
+++ b/starter/angular-xeditable/css/xeditable.css
@@ -113,4 +113,53 @@ a.editable-empty:focus {
text-decoration: none;
}
+/* editable popover */
+.popover-wrapper a {
+ /* make the link always show up */
+ display: inline !important;
+}
+
+.popover-wrapper {
+ /* make absolutely positioned children constrained to this box*/
+ display: inline;
+ position: relative;
+}
+
+.popover-wrapper form {
+ position: absolute;
+ top: -53px;
+ background: #FFF;
+ border: 1px solid #AAA;
+ border-radius: 5px;
+ padding: 7px;
+ width: auto;
+ display: inline-block;
+ left: 50%;
+ margin-left: -110px;
+ z-index: 101;
+}
+
+.popover-wrapper form:before {
+ content:"";
+ width: 0;
+ height: 0;
+ border-left: 10px solid transparent;
+ border-right: 10px solid transparent;
+ border-top: 10px solid #AAA;
+ position:absolute;
+ bottom:-10px;
+ left:100px;
+}
+
+.popover-wrapper form:after {
+ content:"";
+ width:0;
+ height:0;
+ border-left: 9px solid transparent;
+ border-right: 9px solid transparent;
+ border-top: 9px solid #FFF;
+ position:absolute;
+ bottom:-9px;
+ left:101px;
+}
diff --git a/starter/angular-xeditable/css/xeditable.min.css b/starter/angular-xeditable/css/xeditable.min.css
index 4590ae42..376e3dd2 100644
--- a/starter/angular-xeditable/css/xeditable.min.css
+++ b/starter/angular-xeditable/css/xeditable.min.css
@@ -1,7 +1,7 @@
/*!
-angular-xeditable - 0.1.12
+angular-xeditable - 0.2.0
Edit-in-place for angular.js
-Build date: 2016-04-14
+Build date: 2016-06-28
*/
-.editable-wrap{display:inline-block;white-space:nowrap;margin:0}.editable-wrap .editable-controls,.editable-wrap .editable-error{margin-bottom:0}.editable-wrap .editable-controls>input,.editable-wrap .editable-controls>select,.editable-wrap .editable-controls>textarea{margin-bottom:0}.editable-wrap .editable-input{display:inline-block}.editable-buttons{display:inline-block;vertical-align:top}.editable-buttons button{margin-left:5px}.editable-input.editable-has-buttons{width:auto}.editable-bstime .editable-input input[type=text]{width:46px}.editable-bstime .well-small{margin-bottom:0;padding:10px}.editable-range output{display:inline-block;min-width:30px;vertical-align:top;text-align:center}.editable-color input[type=color]{width:50px}.editable-checkbox label span,.editable-checklist label span,.editable-radiolist label span{margin-left:7px;margin-right:10px}.editable-hide{display:none!important}.editable-click,a.editable-click{text-decoration:none;color:#428bca;border-bottom:dashed 1px #428bca}.editable-click:hover,a.editable-click:hover{text-decoration:none;color:#2a6496;border-bottom-color:#2a6496}.editable-empty,.editable-empty:hover,.editable-empty:focus,a.editable-empty,a.editable-empty:hover,a.editable-empty:focus{font-style:italic;color:#D14;text-decoration:none}
\ No newline at end of file
+.editable-wrap{display:inline-block;white-space:nowrap;margin:0}.editable-wrap .editable-controls,.editable-wrap .editable-error{margin-bottom:0}.editable-wrap .editable-controls>input,.editable-wrap .editable-controls>select,.editable-wrap .editable-controls>textarea{margin-bottom:0}.editable-wrap .editable-input{display:inline-block}.editable-buttons{display:inline-block;vertical-align:top}.editable-buttons button{margin-left:5px}.editable-input.editable-has-buttons{width:auto}.editable-bstime .editable-input input[type=text]{width:46px}.editable-bstime .well-small{margin-bottom:0;padding:10px}.editable-range output{display:inline-block;min-width:30px;vertical-align:top;text-align:center}.editable-color input[type=color]{width:50px}.editable-checkbox label span,.editable-checklist label span,.editable-radiolist label span{margin-left:7px;margin-right:10px}.editable-hide{display:none!important}.editable-click,a.editable-click{text-decoration:none;color:#428bca;border-bottom:dashed 1px #428bca}.editable-click:hover,a.editable-click:hover{text-decoration:none;color:#2a6496;border-bottom-color:#2a6496}.editable-empty,.editable-empty:hover,.editable-empty:focus,a.editable-empty,a.editable-empty:hover,a.editable-empty:focus{font-style:italic;color:#D14;text-decoration:none}.popover-wrapper a{display:inline!important}.popover-wrapper{display:inline;position:relative}.popover-wrapper form{position:absolute;top:-53px;background:#FFF;border:1px solid #AAA;border-radius:5px;padding:7px;width:auto;display:inline-block;left:50%;margin-left:-110px;z-index:101}.popover-wrapper form:before{content:"";width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #AAA;position:absolute;bottom:-10px;left:100px}.popover-wrapper form:after{content:"";width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid #FFF;position:absolute;bottom:-9px;left:101px}
\ No newline at end of file
diff --git a/starter/angular-xeditable/js/xeditable.js b/starter/angular-xeditable/js/xeditable.js
index 2bc855e5..8817d68b 100644
--- a/starter/angular-xeditable/js/xeditable.js
+++ b/starter/angular-xeditable/js/xeditable.js
@@ -1,7 +1,7 @@
/*!
-angular-xeditable - 0.1.12
+angular-xeditable - 0.2.0
Edit-in-place for angular.js
-Build date: 2016-04-14
+Build date: 2016-06-28
*/
/**
* Angular-xeditable module
@@ -97,16 +97,12 @@ angular.module('xeditable').directive('editableBsdate', ['editableDirectiveFacto
**/
this.parent.render.call(this);
- var inputDatePicker = angular.element('');
- var buttonDatePicker = angular.element('');
- var buttonWrapper = angular.element('');
+ var inputDatePicker = angular.element('');
inputDatePicker.attr('uib-datepicker-popup', this.attrs.eDatepickerPopupXEditable || 'yyyy/MM/dd' );
inputDatePicker.attr('is-open', this.attrs.eIsOpen);
inputDatePicker.attr('date-disabled', this.attrs.eDateDisabled);
inputDatePicker.attr('uib-datepicker-popup', this.attrs.eDatepickerPopup);
- inputDatePicker.attr('min-date', this.attrs.eMinDate);
- inputDatePicker.attr('max-date', this.attrs.eMaxDate);
inputDatePicker.attr('year-range', this.attrs.eYearRange || 20);
inputDatePicker.attr('show-button-bar', this.attrs.eShowButtonBar || true);
inputDatePicker.attr('current-text', this.attrs.eCurrentText || 'Today');
@@ -116,6 +112,13 @@ angular.module('xeditable').directive('editableBsdate', ['editableDirectiveFacto
inputDatePicker.attr('datepicker-append-to-body', this.attrs.eDatePickerAppendToBody || false);
inputDatePicker.attr('date-disabled', this.attrs.eDateDisabled);
inputDatePicker.attr('name', this.attrs.eName);
+ inputDatePicker.attr('on-open-focus', this.attrs.eOnOpenFocus || true);
+ inputDatePicker.attr('ng-readonly', this.attrs.eReadonly || false);
+
+ if (this.attrs.eNgChange) {
+ inputDatePicker.attr('ng-change', this.attrs.eNgChange);
+ this.inputEl.removeAttr('ng-change');
+ }
this.scope.dateOptions = {
formatDay: this.attrs.eFormatDay || 'dd',
@@ -128,17 +131,32 @@ angular.module('xeditable').directive('editableBsdate', ['editableDirectiveFacto
startingDay: this.attrs.eStartingDay || 0,
minMode: this.attrs.eMinMode || 'day',
maxMode: this.attrs.eMaxMode || 'year',
- initDate: this.attrs.eInitDate || new Date(),
- datepickerMode: this.attrs.eDatepickerMode || 'day'
+ initDate: this.scope.$eval(this.attrs.eInitDate) || new Date(),
+ datepickerMode: this.attrs.eDatepickerMode || 'day',
+ maxDate: this.scope.$eval(this.attrs.eMaxDate) || null,
+ minDate: this.scope.$eval(this.attrs.eMinDate) || null
};
- inputDatePicker.attr('datepicker-options', "dateOptions");
+ var showCalendarButton = angular.isDefined(this.attrs.eShowCalendarButton) ? this.attrs.eShowCalendarButton : "true";
+
+ //See if calendar button should be displayed
+ if (showCalendarButton === "true") {
+ var buttonDatePicker = angular.element('');
+ var buttonWrapper = angular.element('');
+
+ buttonDatePicker.attr('ng-click', this.attrs.eNgClick);
+
+ buttonWrapper.append(buttonDatePicker);
- buttonDatePicker.attr('ng-click',this.attrs.eNgClick);
+ this.inputEl.append(buttonWrapper);
+ } else {
+ //If no calendar button, display calendar popup on click of input field
+ inputDatePicker.attr('ng-click', this.attrs.eNgClick);
+ }
+
+ inputDatePicker.attr('datepicker-options', "dateOptions");
- buttonWrapper.append(buttonDatePicker);
this.inputEl.prepend(inputDatePicker);
- this.inputEl.append(buttonWrapper);
this.inputEl.removeAttr('class');
this.inputEl.removeAttr('ng-click');
@@ -224,7 +242,7 @@ angular.module('xeditable').directive('editableChecklist', [
this.parent.render.call(this);
var parsed = editableNgOptionsParser(this.attrs.eNgOptions);
var html = '';
this.inputEl.removeAttr('ng-model');
@@ -264,23 +282,43 @@ angular.module('xeditable').directive('editableCombodate', ['editableDirectiveFa
]);
/*
-Input types: text|email|tel|number|url|search|color|date|datetime|time|month|week
+Input types: text|password|email|tel|number|url|search|color|date|datetime|datetime-local|time|month|week|file
*/
(function() {
- var types = 'text|password|email|tel|number|url|search|color|date|datetime|time|month|week|file'.split('|');
+ var camelCase = function(dashDelimitedString) {
+ return dashDelimitedString.toLowerCase().replace(/-(.)/g, function(match, word) {
+ return word.toUpperCase();
+ });
+ };
+
+ var types = 'text|password|email|tel|number|url|search|color|date|datetime|datetime-local|time|month|week|file'.split('|');
//todo: datalist
// generate directives
angular.forEach(types, function(type) {
- var directiveName = 'editable'+type.charAt(0).toUpperCase() + type.slice(1);
+ var directiveName = camelCase('editable' + '-' + type);
angular.module('xeditable').directive(directiveName, ['editableDirectiveFactory',
function(editableDirectiveFactory) {
return editableDirectiveFactory({
directiveName: directiveName,
- inputTpl: ''
+ inputTpl: '',
+ render: function() {
+ this.parent.render.call(this);
+
+ // Add label to the input
+ if (this.attrs.eLabel) {
+ var label = angular.element('');
+ this.inputEl.parent().prepend(label);
+ }
+
+ // Add classes to the form
+ if (this.attrs.eFormclass) {
+ this.editorEl.addClass(this.attrs.eFormclass);
+ }
+ }
});
}]);
});
@@ -312,9 +350,10 @@ angular.module('xeditable').directive('editableRadiolist', [
render: function() {
this.parent.render.call(this);
var parsed = editableNgOptionsParser(this.attrs.eNgOptions);
- var html = '';
+
+ var html = '';
this.inputEl.removeAttr('ng-model');
this.inputEl.removeAttr('ng-options');
@@ -339,6 +378,14 @@ angular.module('xeditable').directive('editableSelect', ['editableDirectiveFacto
return editableDirectiveFactory({
directiveName: 'editableSelect',
inputTpl: '',
+ render: function() {
+ this.parent.render.call(this);
+
+ if (this.attrs.ePlaceholder) {
+ var placeholder = angular.element('');
+ this.inputEl.append(placeholder);
+ }
+ },
autosubmit: function() {
var self = this;
self.inputEl.bind('change', function() {
@@ -392,17 +439,27 @@ angular.module('xeditable').directive('editableUiSelect',['editableDirectiveFact
return newEl;
};
- var match = null;
- var choices = null;
+ var findElement = function(name) {
+ for(var i = 0, len = match.length; i < len; i++) {
+ if (match[i].name === name) {
+ return i;
+ }
+ }
+ };
+
+ var match = [];
+ var choices = [];
+
var dir = editableDirectiveFactory({
directiveName: 'editableUiSelect',
inputTpl: '',
render: function () {
+ var index = findElement(this.name);
this.parent.render.call(this);
- this.inputEl.append(rename('ui-select-match', match));
- this.inputEl.append(rename('ui-select-choices', choices));
+ this.inputEl.append(rename('ui-select-match', match[index].element));
+ this.inputEl.append(rename('ui-select-choices', choices[index].element));
this.inputEl.removeAttr('ng-model');
- this.inputEl.attr('ng-model', '$parent.$data');
+ this.inputEl.attr('ng-model', '$parent.$parent.$data');
}
});
@@ -412,8 +469,8 @@ angular.module('xeditable').directive('editableUiSelect',['editableDirectiveFact
var matchEl = el.find('editable-ui-select-match');
var choicesEl = el.find('editable-ui-select-choices');
- match = matchEl.clone();
- choices = choicesEl.clone();
+ match.push({name : attrs.name || attrs.editableUiSelect, element : matchEl.clone()});
+ choices.push({name : attrs.name || attrs.editableUiSelect, element : choicesEl.clone()});
matchEl.remove();
choicesEl.remove();
@@ -670,7 +727,7 @@ angular.module('xeditable').factory('editableController',
}
self.inputEl.addClass('editable-input');
- self.inputEl.attr('ng-model', '$data');
+ self.inputEl.attr('ng-model', '$parent.$data');
// add directiveName class to editor, e.g. `editable-text`
self.editorEl.addClass(editableUtils.camelToDash(self.directiveName));
@@ -697,6 +754,8 @@ angular.module('xeditable').factory('editableController',
valueGetter($scope.$parent);
};
+ // reference of the scope to use for $compile
+ var newScope = null;
//show
self.show = function() {
// set value of scope.$data
@@ -713,7 +772,8 @@ angular.module('xeditable').factory('editableController',
$element.after(self.editorEl);
// compile (needed to attach ng-* events from markup)
- $compile(self.editorEl)($scope);
+ newScope = $scope.$new();
+ $compile(self.editorEl)(newScope);
// attach listeners (`escape`, autosubmit, etc)
self.addListeners();
@@ -727,10 +787,23 @@ angular.module('xeditable').factory('editableController',
//hide
self.hide = function() {
-
+
+ // destroy the scope to prevent memory leak
+ newScope.$destroy();
+
+ self.controlsEl.remove();
self.editorEl.remove();
$element.removeClass('editable-hide');
+ // Manually remove the watcher on 'has-error' to prevent a memory leak on it.
+ for (var i = 0, len = $scope.$$watchers.length; i < len; i++) {
+ if ($scope.$$watchers[i] !== undefined && $scope.$$watchers[i].last && $scope.$$watchers[i].last !== undefined &&
+ typeof $scope.$$watchers[i].last === 'object' && "has-error" in $scope.$$watchers[i].last) {
+ $scope.$$watchers.splice(i, 1);
+ break;
+ }
+ }
+
// onhide
return self.onhide();
};
@@ -921,23 +994,28 @@ function($parse, $compile, editableThemes, $rootScope, $document, editableContro
// form controller
var eFormCtrl;
- // this variable indicates is element is bound to some existing form,
+ // this variable indicates is element is bound to some existing form,
// or it's single element who's form will be generated automatically
// By default consider single element without any linked form.ß
var hasForm = false;
-
+
// element wrapped by form
- if(ctrl[1]) {
+ if (ctrl[1]) {
eFormCtrl = ctrl[1];
hasForm = attrs.eSingle === undefined;
- } else if(attrs.eForm) { // element not wrapped by