123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292 |
- <!-- 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 -->
|