angular form builder

角形构建器

麻省理工学院许可证

这是用CoffeeScript编写的Angularjs形式的建造者。

框架

1. Angularjs 1.2.32
2. jQuery 3.3.1
3. Bootstrap 3
4. 角刺激器

$建造者

 # 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