JarCastingangular-bs-edit
Angular-bs-edit is a set of AngularJS directives for inline editing in the Bootstrap style.
The directives are:
Requirements
- Bootstrap 3
- AngularJS 1.x
- Bootstrap-datepicker 1.6.1+ (optional for bseDate only)
Quick start
Several quick start options are available:
- Download the latest release
- Clone the repo:
git clone https://github.com/flexjoy/angular-bs-edit.git. - Install with Bower:
bower install angular-bs-edit. - Use Bower WebJars dependency.
What's included
angular-bs-edit/
dist/
├─css/
│ ├─angular-bs-edit.css
│ └─angular-bs-edit.min.css
└─js/
├─angular-bs-edit.js
└─angular-bs-edit.min.js
Usage
Load CSS and JS
<link href="dist/css/angular-bs-edit.min.css" rel="stylesheet">
...
<script src="dist/js/angular-bs-edit.min.js"></script>
Add "angular-bs-edit" to dependencies
angular.module('MyApp', ['bs-edit']);
Documentation
bseText
Basic directive
<div bse-text="model"></div>
API
| Attribute | Type | Required | Default | Description |
|---|---|---|---|---|
| bse-text | model |
yes | Angular model | |
| name | string |
no | Form field name | |
| empty | string |
no | empty |
Displayed value for empty field |
bseSelect
Basic directive
<div bse-select="model" onshow="getList()"></div>
API
| Attribute | Type | Required | Default | Description |
|---|---|---|---|---|
| bse-select | model |
yes | Angular model. As object must have two required fields: id and name |
|
| onshow | function |
yes | Function returns an array. Must return a $promise |
|
| name | string |
no | Form field name | |
| empty | string |
no | empty |
Displayed value for empty field |
bseTextarea
Basic directive
<div bse-textarea="model"></div>
API
| Attribute | Type | Required | Default | Description |
|---|---|---|---|---|
| bse-textarea | model |
yes | Angular model | |
| name | string |
no | Form field name | |
| empty | string |
no | empty |
Displayed value for empty field |
bseDate
Basic directive
<div bse-date="model"></div>
API
| Attribute | Type | Required | Default | Description |
|---|---|---|---|---|
| bse-date | model |
yes | Angular model. Initial value can be timestamp or javascript date. Return date in javascript date format | |
| locale | model |
no | en |
Angular model contains language in accordance with the bootstrap-datepicker language |
| name | string |
no | Form field name | |
| empty | string |
no | empty |
Displayed value for empty field |
bseCheckbox
Basic directive
<div bse-checkbox="model"></div>
API
| Attribute | Type | Required | Default | Description |
|---|---|---|---|---|
| bse-checkbox | model |
yes | Angular model | |
| name | string |
no | Form field name |