kelp404 / Angular Form Builder
Licence: mit
Drag and drop to build bootstrap forms in AngularJS.
Stars: ✭ 607
Programming Languages
coffeescript
4710 projects
Labels
Projects that are alternatives of or similar to Angular Form Builder
Forms Angular
Probably the most opinionated framework in the world
Stars: ✭ 412 (-32.13%)
Mutual labels: angularjs
Springboot Jwt Starter
A Spring Boot JWT starter kit for stateless and token-based authentication apps.
Stars: ✭ 538 (-11.37%)
Mutual labels: angularjs
Meantorrent
meanTorrent - MEAN.JS BitTorrent Private Tracker - Full-Stack JavaScript Using MongoDB, Express, AngularJS, and Node.js, A BitTorrent Private Tracker CMS with Multilingual, and IRC announce support, CloudFlare support. Demo at:
Stars: ✭ 438 (-27.84%)
Mutual labels: angularjs
Angular Translate
Translating your AngularJS 1.x apps
Stars: ✭ 4,414 (+627.18%)
Mutual labels: angularjs
Angular Recaptcha
AngularJS directive to add a reCaptcha widget to your form
Stars: ✭ 502 (-17.3%)
Mutual labels: angularjs
Single Spa Portal Example
Example project on how to combine multiple SPA's on a single Website
Stars: ✭ 376 (-38.06%)
Mutual labels: angularjs
Ionic Native Transitions
[Maintenance only] Native transitions (iOS & Android) for Ionic Framework
Stars: ✭ 589 (-2.97%)
Mutual labels: angularjs
Angular Datepicker
Angularjs datepicker module, generate a datepicker on your input element - https://720kb.github.io/angular-datepicker
Stars: ✭ 486 (-19.93%)
Mutual labels: angularjs
Gulp Angular Templatecache
Concatenates and registers AngularJS templates in the $templateCache.
Stars: ✭ 530 (-12.69%)
Mutual labels: angularjs
Nghandsontable
Official AngularJS directive for Handsontable
Stars: ✭ 438 (-27.84%)
Mutual labels: angularjs
Angular Css
CSS on-demand for AngularJS [Looking for New Maintainers]
Stars: ✭ 481 (-20.76%)
Mutual labels: angularjs
Angular Socialshare
Angular social share module, share urls and content on social networks such as facebook, google+, twitter, pinterest and more ... - http://720kb.github.io/angular-socialshare
Stars: ✭ 508 (-16.31%)
Mutual labels: angularjs
Sp Dev Fx Extensions
Code samples and developer content targeted towards SharePoint Framework client-side extensions. https://aka.ms/spfx-extensions
Stars: ✭ 416 (-31.47%)
Mutual labels: angularjs
Angularjs Style Guide
📚 Community-driven set of best practices for AngularJS application development
Stars: ✭ 5,037 (+729.82%)
Mutual labels: angularjs
King Admin
king-admin是一个超酷的前后端分离的基础权限管理后台,前端:angularJs+bootstrap+gulp,后端:spring-boot+mybatis-plus(分java版和kotlin版)
Stars: ✭ 397 (-34.6%)
Mutual labels: angularjs
Faqguru
🎒 🚀 🎉 A list of interview questions. This repository is everything you need to prepare for your technical interview.
Stars: ✭ 4,653 (+666.56%)
Mutual labels: angularjs
Eslint Plugin Angular
ESLint plugin for AngularJS applications
Stars: ✭ 607 (+0%)
Mutual labels: angularjs
Learning Resources
"Technology Gold mine" to collect and share materials/resources
Stars: ✭ 573 (-5.6%)
Mutual labels: angularjs
angular-form-builder
This is an AngularJS form builder written in CoffeeScript.
Frameworks
- AngularJS 1.2.32
- jQuery 3.3.1
- Bootstrap 3
- angular-validator
$builder
# just $builder
angular.module 'yourApp', ['builder']
# include $builder and default components
angular.module 'yourApp', ['builder', 'builder.components']
components
###
All components.
###
$builder.components =
componentName{string}: component{object}
groups
###
All groups of components.
###
$builder.groups = [componentGroup{string}]
registerComponent
# .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={}) ->
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>
forms
###
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}
insertFormObject
$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()
###
removeFormObject
$builder.removeFormObject = (name, index) =>
###
Remove the form object by the index.
@param name: {string} The form name.
@param index: {int} The form object index.
###
builder.directive
fb-components
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-builder
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-form
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.components
There are some default components at this module. This module is not required.
- textInput
- textArea
- checkbox
- radio
- select
Unit Test
$ npm test
Development
# 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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].