角形构建器
麻省理工学院许可证
这是用CoffeeScript编写的Angularjs形式的建造者。
框架
- Angularjs 1.2.32
- jQuery 3.3.1
- Bootstrap 3
- 角刺激器
$建造者
# just $builder
angular . module ' yourApp ' , [ ' builder ' ]
# include $builder and default components
angular . module ' yourApp ' , [ ' builder ' , ' builder.components ' ]成分
###
All components.
###
$builder . components =
componentName{string} : component{object}组
###
All groups of components.
###
$builder . groups = [componentGroup{string}]寄存器组件
# .config
$builderProvider . registerComponent = ( name , component = {}) ->
###
Register the component for form-builder.
@param name: The component name.
@param component: The component object.
group: {string} The component group.
label: {string} The label of the input.
description: {string} The description of the input.
placeholder: {string} The placeholder of the input.
editable: {bool} Is the form object editable?
required: {bool} Is the form object required?
validation: {string} angular-validator. "/regex/" or "[rule1, rule2]". (default is '/.*/')
validationOptions: {array} [{rule: angular-validator, label: 'option label'}] the options for the validation. (default is [])
options: {array} The input options.
arrayToText: {bool} checkbox could use this to convert input (default is no)
template: {string} html template
templateUrl: {string} The url of the template.
popoverTemplate: {string} html template
popoverTemplateUrl: {string} The url of the popover template.
###
# .run
$builder . registerComponent = ( name , component = {}) ->组件.template
< div class =" form-group " >
< label for =" {{name+index}} " class =" col-md-4 control-label " ng-class =" {'fb-required':required} " > {{label}} </ label >
< div class =" col-md-8 " >
< input type =" text " ng-model =" inputText " validator-required =" {{required}} " id =" {{name+index}} " class =" form-control " placeholder =" {{placeholder}} " />
< p class =' help-block ' > {{description}} </ p >
</ div >
</ div >component.popovertemplate
< form >
< div class =" form-group " >
< label class =' control-label ' > Label </ label >
< input type =' text ' ng-model =" label " validator =" [required] " class =' form-control ' />
</ div >
< div class =" form-group " >
< label class =' control-label ' > Description </ label >
< input type =' text ' ng-model =" description " class =' form-control ' />
</ div >
< div class =" form-group " >
< label class =' control-label ' > Placeholder </ label >
< input type =' text ' ng-model =" placeholder " class =' form-control ' />
</ div >
< div class =" checkbox " >
< label >
< input type =' checkbox ' ng-model =" required " />
Required </ label >
</ div >
< div class =" form-group " ng-if =" validationOptions.length > 0 " >
< label class =' control-label ' > Validation </ label >
< select ng-model =" $parent.validation " class =' form-control ' ng-options =" option.rule as option.label for option in validationOptions " > </ select >
</ div >
< hr />
< div class =' form-group ' >
< input type =' submit ' ng-click =" popover.save($event) " class =' btn btn-primary ' value =' Save ' />
< input type =' button ' ng-click =" popover.cancel($event) " class =' btn btn-default ' value =' Cancel ' />
< input type =' button ' ng-click =" popover.remove($event) " class =' btn btn-danger ' value =' Delete ' />
</ div >
</ form > 表格
###
builder mode: `fb-builder` you could drag and drop to build the form.
form mode: `fb-form` this is the form for end-user to input value.
Default is {default: []}
###
$builder . forms =
formName{string} : formObjects{array}插入OmpObject
$builder . insertFormObject = ( name , index , formObject = {}) =>
###
Insert the form object into the form at {index}.
@param name: The form name.
@param index: The form object index.
@param form: The form object.
id: The form object id.
component: {string} The component name
editable: {bool} Is the form object editable? (default is yes)
label: {string} The form object label.
description: {string} The form object description.
placeholder: {string} The form object placeholder.
options: {array} The form object options.
required: {bool} Is the form object required? (default is no)
validation: {string} angular-validator. "/regex/" or "[rule1, rule2]".
[index]: {int} The form object index. It will be generated by $builder.
@return: The form object.
### addformobject
$builder . addFormObject = ( name , formObject = {}) =>
###
Insert the form object into the form at last.
reference $builder.insertFormObject()
### 删除OmperObobject
$builder . removeFormObject = ( name , index ) =>
###
Remove the form object by the index.
@param name: {string} The form name.
@param index: {int} The form object index.
### 构建器
FB组件
a = angular . module ' builder.directive ' , [ ' builder.provider ' , ' builder.controller ' , ' builder.drag ' , ' validator ' ]
fbComponents = ->
###
You could use `fb-components` to render the components view.
###
restrict : ' A '
template :
"""
<ul ng-if="groups.length > 1" class="nav nav-tabs nav-justified">
<li ng-repeat="group in groups" ng-class="{active:activeGroup==group}">
<a href='#' ng-click="selectGroup($event, group)">{{group}}</a>
</li>
</ul>
<div class='form-horizontal'>
<div class='fb-component' ng-repeat="component in components"
fb-component="component"></div>
</div>
"""
controller : ' fbComponentsController '
a . directive ' fbComponents ' , fbComponents < div fb-components > </ div > FB构建器
a = angular . module ' builder.directive ' , [ ' builder.provider ' , ' builder.controller ' , ' builder.drag ' , ' validator ' ]
fbBuilder = ( $injector ) ->
###
You could use `fb-builder="formName"` to render the builder view.
###
restrict : ' A '
template :
"""
<div class='form-horizontal'>
<div class='fb-form-object-editable' ng-repeat="object in formObjects"
fb-form-object-editable="object"></div>
</div>
"""
link : ( scope , element , attrs ) ->
fbBuilder . $inject = [ ' $injector ' ]
a . directive ' fbBuilder ' , fbBuilder < div fb-builder =" default " > </ div > FB形式
a = angular . module ' builder.directive ' , [ ' builder.provider ' , ' builder.controller ' , ' builder.drag ' , ' validator ' ]
fbForm = ( $injector ) ->
###
You could use `fb-form="formName"` to render the form view for end-users.
###
restrict : ' A '
require : ' ngModel ' # form data (end-user input value)
scope :
# input model for scops in ng-repeat
input : ' =ngModel '
template :
"""
<div class='fb-form-object' ng-repeat="object in form" fb-form-object="object">
</div>
"""
controller : ' fbFormController '
link : ( scope , element , attrs ) ->
fbForm . $inject = [ ' $injector ' ]
a . directive ' fbForm ' , fbForm < form class =" form-horizontal " >
< div ng-model =" input " fb-form =" default " fb-default =" defaultValue " > </ div >
< div class =" form-group " >
< div class =" col-md-8 col-md-offset-4 " >
< input type =" submit " ng-click =" submit() " class =" btn btn-default " />
</ div >
</ div >
</ form > builder.com
此模块上有一些默认组件。不需要此模块。
- TextInput
- Textarea
- 复选框
- 收音机
- 选择
单位测试
$ npm test 发展
# install node modules
$ npm install
# install bower components
$ bower install # run the local server and the file watcher to compile CoffeeScript
$ grunt dev
# compile coffee script and minify
$ grunt build下载源码
通过命令行克隆项目:
git clone https://github.com/kelp404/angular-form-builder.git