292 lines
11 KiB
HTML
Executable File
292 lines
11 KiB
HTML
Executable File
<!-- start: PAGE TITLE -->
|
|
<section id="page-title">
|
|
<div class="row">
|
|
<div class="col-sm-8">
|
|
<h1 class="mainTitle" translate="sidebar.nav.forms.XEDITABLE">{{ mainTitle }}</h1>
|
|
<span class="mainDescription">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.</span>
|
|
</div>
|
|
<div ncy-breadcrumb></div>
|
|
</div>
|
|
</section>
|
|
<!-- end: PAGE TITLE -->
|
|
<!-- start: XEDITABLE -->
|
|
<div class="container-fluid container-fullw bg-white">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h5 class="over-title margin-bottom-15"><span class="text-bold">Angular-xeditable</span></h5>
|
|
<p>
|
|
It is based on ideas of x-editable but was written from scratch to use power of angular and support complex forms / editable grids.
|
|
</p>
|
|
<div class="row margin-top-30">
|
|
<div class="col-lg-6 col-md-12">
|
|
<div class="panel panel-white">
|
|
<div class="panel-heading">
|
|
<h5 class="panel-title">Edit Text</h5>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p>
|
|
To make element editable via textbox just add <code>editable-text="model.field"</code> attribute.
|
|
</p>
|
|
<div class="well">
|
|
<!-- /// controller: 'TextSimpleCtrl' - localtion: assets/js/controllers/xeditableCtrl.js /// -->
|
|
<div ng-controller="TextSimpleCtrl" class="ng-scope">
|
|
<a href="#" editable-text="example.name">
|
|
{{ example.name || 'empty' }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-md-12">
|
|
<div class="panel panel-white">
|
|
<div class="panel-heading">
|
|
<h5 class="panel-title">Select Local</h5>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p>
|
|
To create editable select (dropdown) just set <code>editable-select</code> attribute pointing to model.
|
|
To pass dropdown options you should define <code>e-ng-options</code> attribute
|
|
that works like normal angular <code>ng-options</code> but is transfered to underlying <code><select></code> from original element.
|
|
</p>
|
|
<div class="well">
|
|
<!-- /// controller: 'SelectLocalCtrl' - localtion: assets/js/controllers/xeditableCtrl.js /// -->
|
|
<div ng-controller="SelectLocalCtrl">
|
|
<a href="#" editable-select="example.status" e-ng-options="s.value as s.text for s in statuses">
|
|
{{ showStatus() }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-6 col-md-12">
|
|
<div class="panel panel-white">
|
|
<div class="panel-heading">
|
|
<h5 class="panel-title">Select Remote</h5>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p>
|
|
To load select options from remote url you should define <code>onshow</code> attribute pointing to scope function.
|
|
The result of function should be a $http promise, it allows to disable element while loading.
|
|
</p>
|
|
<div class="well">
|
|
<!-- /// controller: 'SelectRemoteCtrl' - localtion: assets/js/controllers/xeditableCtrl.js /// -->
|
|
<div ng-controller="SelectRemoteCtrl">
|
|
<a href="#" editable-select="example.group" onshow="loadGroups()" e-ng-options="g.id as g.text for g in groups">
|
|
{{ example.groupName || 'not set' }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-md-12">
|
|
<div class="panel panel-white">
|
|
<div class="panel-heading">
|
|
<h5 class="panel-title">Textarea</h5>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p>
|
|
To make element editable via textarea just add <code>editable-textarea</code> attribute
|
|
pointing to model in scope. You can also wrap content into <code><pre></code> tags to keep linebreaks.
|
|
Data can be submitted by <em>Ctrl + Enter</em>.
|
|
</p>
|
|
<div class="well">
|
|
<!-- /// controller: 'TextareaCtrl' - localtion: assets/js/controllers/xeditableCtrl.js /// -->
|
|
<div ng-controller="TextareaCtrl">
|
|
<a href="#" editable-textarea="example.desc" e-rows="7" e-cols="40">
|
|
<pre>{{ example.desc || 'no description' }}</pre>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-6 col-md-12">
|
|
<div class="panel panel-white">
|
|
<div class="panel-heading">
|
|
<h5 class="panel-title">Checkbox</h5>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p>
|
|
To make element editable via checkbox just add <code>editable-checkbox</code> attribute
|
|
pointing to model in scope. Set <code>e-title</code> attribute to define text shown with checkbox.
|
|
</p>
|
|
<div class="well">
|
|
<!-- /// controller: 'CheckboxCtrl' - localtion: assets/js/controllers/xeditableCtrl.js /// -->
|
|
<div ng-controller="CheckboxCtrl">
|
|
<a href="#" editable-checkbox="example.remember" e-title="Remember?">
|
|
{{ example.remember && "Remember me!" || "Don't remember" }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-md-12">
|
|
<div class="panel panel-white">
|
|
<div class="panel-heading">
|
|
<h5 class="panel-title">Checklist</h5>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p>
|
|
To create list of checkboxes use <code>editable-checklist</code> attribute pointing to model.
|
|
Also you should define <code>e-ng-options</code> attribute to set value and display items.
|
|
</p>
|
|
<div class="well">
|
|
<!-- /// controller: 'ChecklistCtrl' - localtion: assets/js/controllers/xeditableCtrl.js /// -->
|
|
<div ng-controller="ChecklistCtrl">
|
|
<a href="#" editable-checklist="example.status" e-ng-options="s.value as s.text for s in statuses">
|
|
{{ showStatus() }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-6 col-md-12">
|
|
<div class="panel panel-white">
|
|
<div class="panel-heading">
|
|
<h5 class="panel-title">Radiolist</h5>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p>
|
|
To create list of radios use <code>editable-radiolist</code> attribute pointing to model.
|
|
Also you should define <code>e-ng-options</code> attribute to set value and display items.
|
|
By default, radioboxes aligned <em>horizontally</em>.
|
|
</p>
|
|
<div class="well">
|
|
<!-- /// controller: 'RadiolistCtrl' - localtion: assets/js/controllers/xeditableCtrl.js /// -->
|
|
<div ng-controller="RadiolistCtrl">
|
|
<a href="#" editable-radiolist="example.status" e-ng-options="s.value as s.text for s in statuses">
|
|
{{ showStatus() }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-md-12">
|
|
<div class="panel panel-white">
|
|
<div class="panel-heading">
|
|
<h5 class="panel-title">Typeahead</h5>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p>
|
|
Basically it is normal <code>editable-text</code> control with additional <code>e-typeahead</code> attributes.
|
|
<br>
|
|
You should include additional <code>ui-bootstrap-tpls.min.js</code>:
|
|
</p>
|
|
<div class="well">
|
|
<!-- /// controller: 'TypeaheadCtrl' - localtion: assets/js/controllers/xeditableCtrl.js /// -->
|
|
<div ng-controller="TypeaheadCtrl">
|
|
<a href="#" editable-text="user.state" e-typeahead="state for state in states | filter:$viewValue | limitTo:8">
|
|
{{ user.state || 'empty' }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-6 col-md-12">
|
|
<div class="panel panel-white">
|
|
<div class="panel-heading">
|
|
<h5 class="panel-title">Customize input</h5>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p>
|
|
To define attributes for input (e.g. <code>style</code> or <code>placeholder</code>) you can define them
|
|
on the original element with <code>e-*</code> prefix (e.g. <code>e-style</code> or <code>e-placeholder</code>).
|
|
When input will appear these attributes will be transfered to it.
|
|
</p>
|
|
<div class="well">
|
|
<!-- /// controller: 'TextCustomizeCtrl' - localtion: assets/js/controllers/xeditableCtrl.js /// -->
|
|
<div ng-controller="TextCustomizeCtrl">
|
|
<a href="#" editable-text="user.name" e-style="color: green" e-required e-placeholder="Enter name">
|
|
{{ (user.name || 'empty') | uppercase }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-md-12">
|
|
<div class="panel panel-white">
|
|
<div class="panel-heading">
|
|
<h5 class="panel-title">Trigger manually</h5>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p>
|
|
To trigger edit-in-place by external button you should define <code>e-form</code> attribute.
|
|
Value of it is the name of variable to be created in scope that allows you to show / hide editor manually.
|
|
</p>
|
|
<div class="well">
|
|
<!-- /// controller: 'TextBtnCtrl' - localtion: assets/js/controllers/xeditableCtrl.js /// -->
|
|
<div ng-controller="TextBtnCtrl">
|
|
<span editable-text="user.name" e-form="textBtnForm"> {{ user.name || 'empty' }} </span>
|
|
<button class="btn btn-default" ng-click="textBtnForm.$show()" ng-hide="textBtnForm.$visible">
|
|
edit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-6 col-md-12">
|
|
<div class="panel panel-white">
|
|
<div class="panel-heading">
|
|
<h5 class="panel-title">Hide buttons</h5>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p>
|
|
To hide <em>Ok</em> and <em>Cancel</em> buttons you may set <code>buttons="no"</code> attribute.
|
|
New value will be saved automatically after change.
|
|
</p>
|
|
<!-- /// controller: 'SelectNobuttonsCtrl' - localtion: assets/js/controllers/xeditableCtrl.js /// -->
|
|
<div class="well">
|
|
<div ng-controller="SelectNobuttonsCtrl">
|
|
<a href="#" editable-select="user.status" buttons="no" e-ng-options="s.value as s.text for s in statuses">
|
|
{{ showStatus() }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-md-12">
|
|
<div class="panel panel-white">
|
|
<div class="panel-heading">
|
|
<h5 class="panel-title">Select multiple</h5>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p>
|
|
Just define <code>e-multiple</code> attribute that will be transfered to select as <code>multiple</code>.
|
|
</p>
|
|
<div class="well">
|
|
<!-- /// controller: 'SelectMultipleCtrl' - localtion: assets/js/controllers/xeditableCtrl.js /// -->
|
|
<div ng-controller="SelectMultipleCtrl">
|
|
<a href="#" editable-select="user.status" e-multiple e-ng-options="s.value as s.text for s in statuses">
|
|
{{ showStatus() }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end: XEDITABLE -->
|