- -
Include Angular.js in your project
+ Include Angular.js in your project
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
Optionally include Bootstrap CSS for theming
+Bootstrap 3
- <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
+ <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
Boostrap 4
+
+ <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
- Install angular-xeditable via bower or download latest zip
-
bower install angular-xeditable
+ - Install angular-xeditable viabower ordownload latest zip
+
bower install angular-xeditable
- Include angular-xeditable into your project
<link href="bower_components/angular-xeditable/dist/css/xeditable.css" rel="stylesheet">
@@ -242,11 +253,11 @@ Get started
- Set theme in app.run:
app.run(['editableOptions', function(editableOptions) {
- editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
+ editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs4', 'bs2', 'default'
}]);
- - Markup element that should be editable
+
- Markup element that should be editable
<div ng-controller="Ctrl">
<a href="#" editable-text="user.name">{{ user.name || "empty" }}</a>
</div>
@@ -255,11 +266,11 @@ Get started
app.controller('Ctrl', function($scope) {
$scope.user = {
name: 'awesome user'
- };
+ };
});
- Enjoy!
-
+
@@ -575,7 +586,7 @@ Checklist
demo
@@ -584,6 +595,7 @@ demo
Also you should define e-ng-options attribute to set value and display items.
Optionally define e-checklist-comparator to use a function to determine which checkboxes are actually checked.
Please note, you should include checklist-model directive into your app: var app = angular.module("app", [..., "checklist-model"]);.
+To disable a checkbox include the attribute e-ng-disabled and pass a condition.
By default, checkboxes aligned horizontally. To align vertically just add following CSS:
.editable-checklist label {
display: block;
@@ -593,17 +605,17 @@ demo
html
<div ng-controller="ChecklistCtrl">
- <a href="#" editable-checklist="user.status" e-ng-options="s.value as s.text for s in statuses">
+ <a href="#" editable-checklist="user.status" e-ng-options="s.value as s.text for s in statuses" e-ng-disabled="disableCheckbox(s.value)">
{{ showStatus() }}
</a>
</div>
@@ -622,17 +641,17 @@ controller.js
app.controller('ChecklistCtrl', function($scope, $filter) {
$scope.user = {
status: [2, 3]
- };
+ };
$scope.statuses = [
{value: 1, text: 'status1'},
{value: 2, text: 'status2'},
{value: 3, text: 'status3'}
- ];
+ ];
$scope.showStatus = function() {
var selected = [];
- angular.forEach($scope.statuses, function(s) {
+ angular.forEach($scope.statuses, function(s) {
if ($scope.user.status.indexOf(s.value) >= 0) {
selected.push(s.text);
}
@@ -640,6 +659,13 @@ controller.js
return selected.length ? selected.join(', ') : 'Not set';
};
+ $scope.disableCheckbox = function (v) {
+ if ($scope.user.status.indexOf(v) === -1) {
+ return true
+ }
+ return false;
+ }
+
});
Overview
Angular-xeditable is a bundle of AngularJS directives that allows you to create -editable elements.
-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 +editable elements. +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.
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 ui-select you may need to include angular-ui ui-select.
For ngTagsInput you may need to include mbenford ngTagsInput.
If installing via NPM, jQuery and moment js will also be installed.
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. +For ui-select you may need to include angular-ui ui-select. +For ngTagsInput you may need to include mbenford ngTagsInput. +If installing via NPM, jQuery and moment js will also be installed.
Controls & Features
-- text
+- text
- textarea
- select
- checkbox
@@ -201,7 +209,7 @@ - date
- time
- datetime
-- html5 inputs
+- html5 inputs
- typeahead
- ui-select
- ngTagsInput
@@ -223,14 +231,17 @@
@@ -575,7 +586,7 @@
-
+
{{ showStatus() }}
@@ -711,8 +737,10 @@
Controls & Features
Controls & Features
Get started
--
- Install angular-xeditable via bower or download latest zip
-
+
- Install angular-xeditable viabower ordownload latest zip
+
- Include angular-xeditable into your project
- Set theme in app.run:
- - Markup element that should be editable
+
- Markup element that should be editable
- Enjoy!
-
View starter templateDownload starter zip
+ View starter templateDownload starter zip
Include Angular.js in your project
+Include Angular.js in your project
Optionally include Bootstrap CSS for theming
+Bootstrap 3
- +Boostrap 4
+ +app.run(['editableOptions', function(editableOptions) { - editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default' + editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs4', 'bs2', 'default' }]);<div ng-controller="Ctrl"> <a href="#" editable-text="user.name">{{ user.name || "empty" }}</a> </div>@@ -255,11 +266,11 @@Get started
app.controller('Ctrl', function($scope) { $scope.user = { name: 'awesome user' - }; + }; });Checklist
demo
demo
Also you should definee-ng-optionsattribute to set value and display items. Optionally definee-checklist-comparatorto use a function to determine which checkboxes are actually checked.Please note, you should include checklist-model directive into your app:
+var app = angular.module("app", [..., "checklist-model"]);.To disable a checkbox include the attribute
e-ng-disabledand pass a condition.By default, checkboxes aligned horizontally. To align vertically just add following CSS:
demo
-Date control is implemented via Angular-ui bootstrap datepicker.
+You should include additional
ui-bootstrap-tpls.min.js:Date control is implemented via Angular-ui bootstrap datepicker.
+You should include additional
ui-bootstrap-tpls.min.jsfor Bootstrap 3:For Bootstrap 4, include:
+Add
ui.bootstrapas module dependency:var app = angular.module("app", ["xeditable", "ui.bootstrap"]);And set
@@ -834,31 +862,14 @@editable-bsdateattribute 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-changeattribute 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-buttonattribute to false.Other parameters can be defined via
e-*syntax, e.g.e-datepicker-popup="dd-MMMM-yyyy".demo
-Time control is implemented via Angular-ui bootstrap timepicker.
+Currently it has only Bootstrap 2 version, Bootstrap 3 version is in progress.
You should include additional
ui-bootstrap-tpls.min.js:Time control is implemented via Angular-ui bootstrap timepicker.
+You should include additional
ui-bootstrap-tpls.min.jsfor Bootstrap 3:For Bootstrap 4, include:
+Add
ui.bootstrapas module dependency:var app = angular.module("app", ["xeditable", "ui.bootstrap"]);And set
-editable-bstimeattribute in editable element. Other parameters can be defined viae-*syntax, e.g.e-minute-step="10".To get it working with Bootstrap 3 you should add following css:
-