├── .gitignore
├── LICENSE
├── README.md
├── bower.json
├── demo
    ├── app.js
    ├── form-template.js
    └── index.html
└── dynamic-forms.js


/.gitignore:
--------------------------------------------------------------------------------
1 | # First line ignored?
2 | node_modules
3 | bower_components
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2013-2014 Dan Hunsaker
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | angular-dynamic-forms
  2 | =====================
  3 | 
  4 | [![Join the chat at https://gitter.im/danhunsaker/angular-dynamic-forms](https://badges.gitter.im/danhunsaker/angular-dynamic-forms.svg)](https://gitter.im/danhunsaker/angular-dynamic-forms?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
  5 | Build Forms in AngularJS From Nothing But JSON
  6 | 
  7 | Uses the MIT License.  See `LICENSE` file for details.
  8 | 
  9 | Installation
 10 | ------------
 11 | ### Bower ###
 12 | The easy way.
 13 | 
 14 | 1. `bower install angular-dynforms` (add `--save` if you want to add the dependency to your own
 15 |     project - HIGHLY RECOMMENDED)
 16 | 
 17 | ### Git ###
 18 | The old way.
 19 | 
 20 | 1. Clone the project from either [GitHub][] or [BitBucket][] - whichever you prefer.
 21 | 2. Copy `dynamic-forms.js` into your project wherever your other assets reside.
 22 | 
 23 | #### Name Change ####
 24 | When registering this project with bower, I discovered that there's another project called
 25 | [angular-dynamic-forms][wbreza] already registered there.  The project was created at the beginning
 26 | of October 2014, long after this one, and I haven't yet worked out if there are any similarities in
 27 | the implementation, but as I've been thinking of shortening the name of this project for a while
 28 | anyway, I went ahead and registered it in bower with the shorter name.  I'll be changing the repo
 29 | name on GitHub and BitBucket, too, but not for several months, to give existing users time to
 30 | notice the addition of full bower support.  The repo will be renamed to match the name registered
 31 | in bower, and the bower name will not change.  It is strongly recommended to use the bower method
 32 | so you can get the latest version of this project at any given time, regardless of whether I've
 33 | gotten around to renaming the repo.
 34 | 
 35 | Use
 36 | ---
 37 | As with any other [AngularJS][] module:
 38 | 
 39 | * include the script into your page anywhere after [AngularJS][] itself, using whichever mechanism
 40 |     you use for including scripts in your project:
 41 | 
 42 | ```html
 43 |     <script src="bower_components/angular-dynforms/dynamic-forms.js"></script>
 44 | ```
 45 | 
 46 | ```javascript
 47 |     require('angular-dynforms');
 48 | ```
 49 | 
 50 | * _**INTERNET EXPLORER**_: This project (as with most of Angular itself) WILL NOT work
 51 |     properly with IE 6 or 7.  Some of the functionality can be coerced into working, but much of it
 52 | 	will simply be broken.  `radio` fields, for example, will have every member selected.  This may
 53 | 	be fixed in a future version, but as it's 2014, IE 6 and 7 are very low priorities, especially
 54 | 	with XP reaching end of life.  IE 8 will work, with a bit of extra setup (you can try this for 
 55 |     IE 6 and 7 as well, but again, they probably won't work):
 56 | 
 57 | ```html
 58 |     <!--[if lte IE 8]>
 59 |         <script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.1/json3.min.js"></script>
 60 |         <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.3.0/es5-shim.min.js"></script>
 61 |         <script>
 62 |             document.createElement('ng-include');
 63 |             document.createElement('ng-pluralize');
 64 |             document.createElement('ng-view');
 65 |             document.createElement('ng-form');
 66 |             document.createElement('dynamic-form');
 67 |             
 68 |             // Optionally these for CSS
 69 |             document.createElement('ng:include');
 70 |             document.createElement('ng:pluralize');
 71 |             document.createElement('ng:view');
 72 |             document.createElement('ng:form');
 73 |             
 74 |             // IE doesn't always run the bootstrap on its own...
 75 |             $(document).ready(function() {
 76 |               angular.bootstrap(document.documentElement);
 77 |             });
 78 |         </script>
 79 |     <![endif]-->
 80 | ```
 81 | 
 82 | * inject `dynform` as a dependency of your project.
 83 | 
 84 | ```javascript
 85 |     appModule = angular.module('app', ['dynform']);
 86 | ```
 87 | 
 88 | * create a [dynamic-form](#the-directive) element anywhere in your page.
 89 | 
 90 | ```html
 91 |     <dynamic-form template="formTemplate"
 92 |         ng-model="formData"
 93 |         ng-submit="processForm()">
 94 |     </dynamic-form>
 95 | ```
 96 | 
 97 | * populate your [template](#the-template) with a JSON array describing the form you want to create.
 98 | 
 99 | ```javascript
100 |     $scope.formData = {};   // JavaScript needs an object to put our form's models into.
101 |     
102 |     $scope.formTemplate = [
103 |         {
104 |             "type": "text",
105 |             "label": "First Name",
106 |             "model": "name.first"
107 |         },
108 |         {
109 |             "type": "text",
110 |             "label": "Last Name",
111 |             "model": "name.last"
112 |         },
113 |         {
114 |             "type": "email",
115 |             "label": "Email Address",
116 |             "model": "email"
117 |         },
118 |         {
119 |             "type": "submit",
120 |             "model": "submit"
121 |         },
122 |     ];
123 |     
124 |     $scope.processForm = function () {
125 |         /* Handle the form submission... */
126 |     };
127 | ```
128 | 
129 | And that's about it!  Check out the demo for a more robust example, or keep reading to learn about
130 | all of the things you can do with this module.
131 | 
132 | The TL;DR Version
133 | -----------------
134 | ### The Directive ###
135 | You invoke the `dynamic-form` directive using an element (`<dynamic-form></dynamic-form>`) - other
136 | options (such as class, attribute, and comment) are unsupported (for now).  The directive requires
137 | two attributes: an [`ng-model`][], and either a `template` or a `template-url`.  The [`ng-model`][]
138 | will be used to generate valid [`ng-model`][] attributes for the various input controls in the
139 | template.  In accordance with how [AngularJS][] handles this attribute elsewhere, your entire form's
140 | data will be available in keys of whichever model you specify here (though nested forms are an
141 | exception, unless you specify a key in the outer form's model as the [`ng-model`][] of the inner
142 | form).  **You _must_ initialize this parent model to an object, or your app will break.**
143 | 
144 | If you specify a `template-url`, the `dynamic-form` directive will retrieve the form template via
145 | [`$http`][] and build out your form based on the response.  Currently, failure is silently ignored.
146 | This may change in a later release.
147 | 
148 | You may not want to rely on the directive to retrieve your form directly - perhaps you want to do
149 | some processing on the server response before passing it to the directive for building, or maybe
150 | you need to specify a more complex [`$http`][] request with advanced authentication.  Or perhaps you
151 | just want to proactively handle failure to retrieve the template.  Enter the `template` attribute.
152 | When the directive sees `template`, it ignores any `template-url` and instead uses the array
153 | identified by the `template` attribute.  (See [below](#the-template) for more details on this value.)
154 | At some point in the future you will also be able to dynamically update this array, and the changes
155 | will automatically be reflected in the DOM.  This is currently unsupported, however, and for technical
156 | reasons, will likely not be supported at all for `templateUrl` arrays.
157 | 
158 | Any other attributes you specify on the `dynamic-form` element are copied across to the `form` or
159 | [`ng-form`][] element that the directive builds to replace itself with.  Similarly, any pre-existing
160 | contents are copied across as well, to the top of the resulting form, with the
161 | dynamically-specified controls below them.  This allows you to nest `dynamic-form`s inside each
162 | other in the same way as [`ng-form`][] (which is one reason this directive implements this
163 | pseudo-transclusion).
164 | 
165 | The `dynamic-form` directive makes every attempt to set up the forms it generates to be valid HTML
166 | forms, complete with the ability to have their data submitted to the server by the browser's native
167 | form submission mechanism and still have the data in the same structure that it takes on in your
168 | [AngularJS][] models.  This makes it easy to implement a fallback mode in case there is a problem
169 | with using the standard [Angular][AngularJS] methods to handle your form inputs.  You will, of
170 | course, need to provide your own `action` and `method` attributes for this to work completely.
171 | 
172 | ### The Template ###
173 | Regardless of whether it arrives via `template` or `template-url`, the form template is a
174 | fairly-straightforward JavaScript array/object.  Each index/key of the template value (referred to
175 | elsewhere in this README as an ID) serves as the `name` and [`ng-model`][] (where applicable) of the
176 | control described in the corresponding value.  Each of the values, then, is an object describing a
177 | form input control.  A `type` key identifies what kind of control to build, which in turn determines
178 | what [other keys](#common-options) are expected.  Any `type` that isn't supported builds a `<span>`
179 | containing the value of the `label` key, if one exists, as its content, and any other keys as
180 | attributes.
181 | 
182 | ### Supported Control Types ###
183 | Following is a list of all currently-supported `type`s, and then a more detailed specification of
184 | each.  Links to Angular documentation in the specifications below indicate that values will be
185 | added to the Angular-defined attributes mentioned, and that Angular provides the actual
186 | functionality described there.  Note that not all of these `type`s are properly supported in all
187 | browsers, yet; there are a number of references around the web for [which browsers support
188 | what][formsupport].
189 | 
190 | #### Common Options ####
191 | * `attributes`: key-value pairs for arbitrary attributes not otherwise supported here; it is strongly
192 |     recommended that you use this option *only* if the attribute you need isn't already supported, as
193 |     any attributes specified here bypass any enhancements this module provides.
194 | * `class`: see [`ng-class`][]
195 | * `callback`: see [`ng-change`][] (or [`ng-click`][] for button-like types)
196 | * `disabled`: see [`ng-disabled`][]
197 | * `label`: wraps the control in a `<label>` tag with the value as text content (but see specific
198 |     types for exceptions to how this is handled)
199 | * __The following options are only supported for types that have values:__
200 |     * `model`: overrides the control's ID as the value of [`ng-model`][] and `name` attributes;
201 |         allows multiple controls to be tied to a single model - you can nest your models further
202 |         by using dot notation in the value
203 |     * `readonly`: see [`ng-readonly`][]
204 |     * `required`: see [`ng-required`][]
205 |     * `val`: an initial value for the model
206 | 
207 | * [button](#button)
208 | * [checkbox](#checkbox)
209 | * [checklist](#checklist)
210 | * [color](#color)
211 | * [date](#date)
212 | * [datetime](#datetime)
213 | * [datetime-local](#datetime-local)
214 | * [email](#email)
215 | * [fieldset](#fieldset)
216 | * [file](#file)
217 | * [hidden](#hidden)
218 | * [image](#image)
219 | * [legend](#legend)
220 | * [month](#month)
221 | * [number](#number)
222 | * [password](#password)
223 | * [radio](#radio)
224 | * [range](#range)
225 | * [reset](#reset)
226 | * [search](#search)
227 | * [select](#select)
228 | * [submit](#submit)
229 | * [tel](#tel)
230 | * [text](#text)
231 | * [textarea](#textarea)
232 | * [time](#time)
233 | * [url](#url)
234 | * [week](#week)
235 | 
236 | #### button ####
237 | * __Renders:__ `<button></button>`
238 | * __Additional Options:__
239 |     * None
240 | * __Other Notes:__
241 |     * The value of `label` is used as the content of the `<button>` itself; no additional elements
242 |         are created
243 | 
244 | #### checkbox ####
245 | * __Renders:__ `<input type="checkbox">`
246 | * __Additional Options:__
247 |     * `isOn`: see [`ng-true-value`][]
248 |     * `isOff`: see [`ng-false-value`][]
249 |     * `slaveTo`: see [`ng-checked`][]
250 | * __Other Notes:__
251 |     * See also the [checklist](#checklist) type, below
252 | 
253 | #### checklist ####
254 | * __Renders:__ multiple `<input type="checkbox">` controls
255 | * __Additional Options:__
256 |     * `options`: an object containing a collection of child objects, each describing a checkbox
257 |         * The key of each child object specifies the key to associate with the checkbox it describes
258 |         * `class`: applies a specific [`ng-class`][] to the current checkbox, independently of the
259 |             rest
260 |         * `label`: operates identically to the standard `label` option, but applies to a specific
261 |             checkbox in the list
262 |         * See the [checkbox](#checkbox) type for other fields supported here
263 | * __Other Notes:__
264 |     * This is a convenience type, used to tie a group of [checkbox](#checkbox) controls together
265 |         under a single model; the model holds an object, and each control sets a separate key
266 |         within it
267 |     * You can set a `val` on the entire `checklist` (it must, of course, be an object) in addition
268 |         to any per-option `val`s; the per-option versions are set after the full `checklist`
269 |         version, so they will override anything set to their key by the `checklist` itself
270 | 
271 | #### color ####
272 | * __Renders:__ `<input type="color">`
273 | * __Additional Options:__
274 |     * None
275 | * __Other Notes:__
276 |     * May not be [supported][colorsupport] in all browsers
277 | 
278 | #### date ####
279 | * __Renders:__ `<input type="date">`
280 | * __Additional Options:__
281 |     * See [text](#text) below
282 | * __Other Notes:__
283 |     * May not be [supported][datesupport] in all browsers
284 | 
285 | #### datetime ####
286 | * __Renders:__ `<input type="datetime">`
287 | * __Additional Options:__
288 |     * See [text](#text) below
289 | * __Other Notes:__
290 |     * May not be [supported][datesupport] in all browsers
291 | 
292 | #### datetime-local ####
293 | * __Renders:__ `<input type="datetime-local">`
294 | * __Additional Options:__
295 |     * See [text](#text) below
296 | * __Other Notes:__
297 |     * May not be [supported][datesupport] in all browsers
298 | 
299 | #### email ####
300 | * __Renders:__ `<input type="email">`
301 | * __Additional Options:__
302 |     * See [text](#text) below
303 | * __Other Notes:__
304 |     * On devices that have on-screen keyboards, the browser may modify the keyboard layout to make
305 |         entering email addresses in these controls easier.
306 | 
307 | #### fieldset ####
308 | * __Renders:__ `<fieldset></fieldset>`
309 | * __Additional Options:__
310 |     * `fields`: the template for the fields which should appear in the `fieldset`
311 | * __Other Notes:__
312 |     * The value of `label` is used to create a `<legend>` tag as the first child of the `fieldset`
313 | 
314 | #### file ####
315 | * __Renders:__ `<input type="file">`
316 | * __Additional Options:__
317 |     * `multiple`: whether or not the user can select more than one file at a time with this single
318 |         control
319 | * __Other Notes:__
320 |     * [A directive][filedirective] is included with this module that allows `file` controls to
321 |         properly bind to [AngularJS][] models - the control's FileList object is stored in the
322 |         model, and updating the model's value with a valid FileList object will update the control
323 |         accordingly
324 |     * Also included is [an AngularJS service][fileservice] that wraps the browser's FileReader in a
325 |         promise, so you can get the contents of the selected file for further manipulation, or even
326 |         send it along in an AJAX request, and all without leaving [AngularJS][]
327 |     * Both of these additions are modified versions of code by [K. Scott Allen][] and made
328 |         available on the [OdeToCode][] website; the original versions are linked above
329 | 
330 | #### hidden ####
331 | * __Renders:__ `<input type="hidden">`
332 | * __Additional Options:__
333 |     * None
334 | * __Other Notes:__
335 |     * Because the underlying HTML control has so little functionality, this control only supports
336 |         `model` and `val` keys
337 | 
338 | #### image ####
339 | * __Renders:__ `<input type="image">`
340 | * __Additional Options:__
341 |     * `source`: the URL of the image to display in this control
342 | * __Other Notes:__
343 |     * The value of `label` is used to set the `alt` attribute of this control
344 | 
345 | #### legend ####
346 | * __Renders:__ `<legend></legend>`
347 | * __Additional Options:__
348 |     * None
349 | * __Other Notes:__
350 |     * As a display-only control, only `class`, `label`, `callback` (via [`ng-click`][]) and
351 |         `disabled` are supported on this control
352 |     * The value of `label` is used to set the contents of this control
353 | 
354 | #### month ####
355 | * __Renders:__ `<input type="month">`
356 | * __Additional Options:__
357 |     * See [text](#text) below
358 | * __Other Notes:__
359 |     * May not be [supported][datesupport] in all browsers
360 | 
361 | #### number ####
362 | * __Renders:__ `<input type="number">`
363 | * __Additional Options:__
364 |     * `maxValue`: the largest allowed value for this control
365 |     * `minValue`: the smallest allowed value for this control
366 |     * `step`: the amount by which the control can increase or decrease in value
367 |     * Also see [text](#text) below
368 | * __Other Notes:__
369 |     * May not be [supported][numbersupport] in all browsers
370 | 
371 | #### password ####
372 | * __Renders:__ `<input type="password">`
373 | * __Additional Options:__
374 |     * See [text](#text) below
375 | * __Other Notes:__
376 |     * The only real difference between this control and a [text](#text) control is in the rendering,
377 |         so they support exactly the same options (with the exception of `splitBy`, since it makes no
378 |         sense to split obscured-input strings)
379 | 
380 | #### radio ####
381 | * __Renders:__ multiple `<input type="radio">` controls
382 | * __Additional Options:__
383 |     * `values`: an object which acts as a simple list of radio options to include
384 |         * The key of each property of this option specifies the value the model should be set to
385 |             when the associated radio `input` is selected
386 |         * The value of each property of this option specifies the label to use for the associated
387 |             radio `input`
388 | * __Other Notes:__
389 |     * Because a single radio `input` by itself isn't particularly useful in most cases, this control
390 |         type assumes users will want to define a list of `value:label` pairs tied to a single model;
391 |         if this is incorrect, you can still create `radio` controls with just one `value:label`
392 |         each, and then tie them together using the `model` key
393 |     * [The directive](#the-directive) doesn't prevent you from applying a `label` to the entire
394 |         collection of `input` controls created by this control type - the entire `div` containing
395 |         them will be wrapped in a `<label>` tag; keep this in mind when building style sheets
396 | 
397 | #### range ####
398 | * __Renders:__ `<input type="range">`
399 | * __Additional Options:__
400 |     * `step`: the amount by which the control can increase or decrease in value
401 |     * Also see [number](#number) above
402 | * __Other Notes:__
403 |     * By default, this control seems to provide its values to [AngularJS][] as strings.  This might
404 |         be due to [Angular][AngularJS] (as well as the browser) handling them as regular
405 |         [text](#text) controls internally.  Among its other minor tweaks, this module contains a
406 |         very simple directive to override the default [`$parsers`][] mechanism for `range` controls
407 |         and convert these values back to numbers (floats, in case your `step` is not an integer).
408 |     * May not be [supported][rangesupport] in all browsers
409 | 
410 | #### reset ####
411 | * __Renders:__ `<button type="reset"></button>`
412 | * __Additional Options:__
413 |     * None
414 | * __Other Notes:__
415 |     * As with [button](#button), the value of `label` provides the control's contents
416 |     * [AngularJS][] doesn't seem to monitor the `reset` event, so your models wouldn't normally be
417 |         updated when the form is cleared in this way; while this control is strongly dis-recommended
418 |         in most cases, this directive supports it, so code is included that monitors and properly
419 |         handles these events (NOTE - this feature has not been widely tested; please report any
420 |         issues on [GitHub][issues-github] or [Bitbucket][issues-bitbucket])
421 | 
422 | #### search ####
423 | * __Renders:__ `<input type="search">`
424 | * __Additional Options:__
425 |     * See [text](#text) below
426 | * __Other Notes:__
427 |     * All browsers support this because it works exactly like a [text](#text) control.  The idea is
428 |         that search boxes will be styled differently, and on some devices might even support
429 |         additional input methods, such as voice recognition.  You'll probably want to tie these
430 |         controls to some kind of search mechanism in your app, since users whose browsers *do*
431 |         render them differently will expect them to act accordingly.
432 | 
433 | #### select ####
434 | * __Renders:__ `<select></select>`
435 | * __Additional Options:__
436 |     * `autoOptions`: see [`ng-options`][]
437 |     * `empty`: if not `false` or undefined, specifies the display value (contents) of an empty
438 |         `option`, and tells the directive to include it in its output
439 |     * `multiple`: if not `false` or undefined, allows the user to select more than one `option` at
440 |         one time
441 |     * `options`: an object containing a collection of child objects, each describing an `option` to
442 |         include in the `select` list
443 |         * The key of each child object gives the value of the associated `option`
444 |         * `disabled`: see [`ng-disabled`][]
445 |         * `group`: adds the `option` to an `optgroup` whose label is the value of the `group` key
446 |         * `label`: the display value (contents) of the `option`
447 |         * `slaveTo`: see [`ng-selected`][]
448 | * __Other Notes:__
449 |     * An unreleased prototype version of this module (which used a combination of [`ng-repeat`][]
450 |         and [`ng-switch`][] instead of a [directive][]) specified four different control types for
451 |         the functionality provided by this one - one for normal lists, one for grouped lists, one
452 |         for multi-select lists, and one that combined multi-select with group support; this version
453 |         is much cleaner about its approach - multi-select is the 'flag' option `multiple`, and
454 |         groups are enabled by simply defining them with their associated values
455 |     * Note that only one of `options` and `autoOptions` will be honored by this module - if you
456 |         specify `autoOptions`, `options` is completely ignored; keep this in mind when building your
457 |         forms because the actual values will have to be specified in a separate object
458 | 
459 | #### submit ####
460 | * __Renders:__ `<button type="submit"></button>`
461 | * __Additional Options:__
462 |     * None
463 | * __Other Notes:__
464 |     * As with [button](#button), the value of `label` provides the control's contents
465 | 
466 | #### tel ####
467 | * __Renders:__ `<input type="tel">`
468 | * __Additional Options:__
469 |     * See [text](#text) below
470 | * __Other Notes:__
471 |     * There is currently no validation support for this control in nearly any browser, and
472 |         [AngularJS][] doesn't provide any by default.  This is mostly because telephone numbers are
473 |         tricky beasts, especially with the differences between how these numbers are allocated from
474 |         one part of the world to another.  And that's before we start getting messy with things
475 |         like VoIP "numbers".
476 | 
477 | #### text ####
478 | * __Renders:__ `<input type="text">`
479 | * __Additional Options:__
480 |     * `maxLength`: see [`ng-maxlength`][]
481 |     * `minLength`: see [`ng-minlength`][]
482 |     * `placeholder`: a value to display in a `text`-like control when it is empty
483 |     * `splitBy`: see [`ng-list`][] (this option is only supported by `text` and
484 |         [textarea](#textarea) controls)
485 |     * `validate`: see [`ng-pattern`][]
486 | * __Other Notes:__
487 |     * This control serves as the base template for nearly all the other form input controls defined
488 |         by HTML - as such, most of the controls supported by this directive support these options as
489 |         well, leading their entries to refer here
490 | 
491 | #### textarea ####
492 | * __Renders:__ `<textarea></textarea>`
493 | * __Additional Options:__
494 |     * See [text](#text) above
495 | * __Other Notes:__
496 |     * While the syntax used to define them in raw HTML differs to some extent, the only practical
497 |         difference between [text](#text) and `textarea` controls is the multi-line support offered
498 |         by `textarea` - therefore, the options available to each are identical
499 | 
500 | #### time ####
501 | * __Renders:__ `<input type="time">`
502 | * __Additional Options:__
503 |     * See [text](#text) above
504 | * __Other Notes:__
505 |     * May not be [supported][datesupport] in all browsers
506 | 
507 | #### url ####
508 | * __Renders:__ `<input type="url">`
509 | * __Additional Options:__
510 |     * See [text](#text) above
511 | * __Other Notes:__
512 |     * Similar to the [email](#email) type, some browsers will alter on-screen keyboards when this
513 |         control type is selected in such a way that URL entry is simplified; [AngularJS][],
514 |         meanwhile, enforces the requirement that the value be a valid URL, even if the browser does
515 |         not
516 | 
517 | #### week ####
518 | * __Renders:__ `<input type="week">`
519 | * __Additional Options:__
520 |     * See [text](#text) above
521 | * __Other Notes:__
522 |     * May not be [supported][datesupport] in all browsers
523 | 
524 | Acknowledgements
525 | ----------------
526 | * [Frank Linehan][] for leading me in [the right direction][directive].
527 | * [K. Scott Allen][] for the [file input directive][filedirective] and the [FileReader
528 |     service][fileservice] adapted for use here.
529 | * [Joel Hooks][] for pointing out that the LGPL is too strong for this kind of project,
530 | 	and that a monolithic piece of code like version 0.0.0 makes very little sense in
531 | 	an MVVM environment.
532 | * For various code enhancements (see commit history for details):
533 |     * [Florian Rathgeber][]
534 | 
535 | Alternatives
536 | ------------
537 | If this project isn't for you (it's not very mature, yet, so there are plenty of reasons it may not
538 | be a good fit for your projects, yet), there are some other ways to go about the same basic thing.
539 | They each have their own benefits and drawbacks, but I'll let their own developers speak to those,
540 | especially as I haven't tested any, yet.  Here are a few; let me know if you're aware of others:
541 | 
542 | * [JSON Form][json-form] - A jQuery-based library for converting JSON Schemas into HTML forms;
543 |     a mature option with many advanced features, though centered around Twitter Bootstrap.
544 | * [Angular Schema Form][schema-form] - An Angular implementation of (not wrapper for) JSON Form.
545 | * [Alpaca][alpacajs] - Another jQuery-based library, it boasts many of the same features as JSON
546 |     Form.
547 | * [MetaWidget][metawidget] - Apparently automated, based on existing infrastructure, rather than
548 |     controlled by code.  Boasts compatibility with many languages and frameworks, including
549 |     AngularJS, Java Swing, native Android, and others.
550 | * [inputEx][inputex] - A YUI3 library offering.
551 | * ["The Other" ADF][wbreza] - Wallace Breza's project with the same name this one started with.
552 | 
553 | Issues And Assistance
554 | ---------------------
555 | If you notice a problem, let me know about it on [GitHub][issues-github] or
556 | [Bitbucket][issues-bitbucket]!
557 | 
558 | Any and all help is welcome; just fork the project on either [GitHub][] or [BitBucket][] (whichever
559 | you prefer), and submit a pull request with your contribution(s)!
560 | 
561 | [colorsupport]: http://caniuse.com/input-color
562 | [datesupport]: http://caniuse.com/input-datetime
563 | [filedirective]: http://odetocode.com/blogs/scott/archive/2013/07/05/a-file-input-directive-for-angularjs.aspx
564 | [fileservice]: http://odetocode.com/blogs/scott/archive/2013/07/03/building-a-filereader-service-for-angularjs-the-service.aspx
565 | [formsupport]: http://caniuse.com/forms
566 | [numbersupport]: http://caniuse.com/input-number
567 | [pholdsupport]: http://caniuse.com/input-placeholder
568 | [rangesupport]: http://caniuse.com/input-range
569 | 
570 | [GitHub]: https://github.com/danhunsaker/angular-dynamic-forms
571 | [BitBucket]: https://bitbucket.org/danhunsaker/angular-dynamic-forms
572 | [issues-github]: https://github.com/danhunsaker/angular-dynamic-forms/issues
573 | [issues-bitbucket]: https://bitbucket.org/danhunsaker/angular-dynamic-forms/issues
574 | 
575 | [wbreza]: https://github.com/wbreza/angular-dynamic-forms
576 | [json-form]: https://github.com/joshfire/jsonform
577 | [schema-form]: https://github.com/Textalk/angular-schema-form
578 | [alpacajs]: http://www.alpacajs.org/
579 | [metawidget]: http://metawidget.sourceforge.net/
580 | [inputex]: http://neyric.github.io/inputex/
581 | 
582 | [`$http`]: http://docs.angularjs.org/api/ng.$http
583 | [`$parsers`]: http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController
584 | [directive]: http://docs.angularjs.org/guide/directive
585 | [`ng-change`]: http://docs.angularjs.org/api/ng.directive:ngChange
586 | [`ng-checked`]: http://docs.angularjs.org/api/ng.directive:ngChecked
587 | [`ng-class`]: http://docs.angularjs.org/api/ng.directive:ngClass
588 | [`ng-click`]: http://docs.angularjs.org/api/ng.directive:ngClick
589 | [`ng-disabled`]: http://docs.angularjs.org/api/ng.directive:ngDisabled
590 | [`ng-false-value`]: http://docs.angularjs.org/api/ng.directive:input.checkbox
591 | [`ng-form`]: http://docs.angularjs.org/api/ng.directive:form
592 | [`ng-list`]: http://docs.angularjs.org/api/ng.directive:ngList
593 | [`ng-maxlength`]: http://docs.angularjs.org/api/ng.directive:input
594 | [`ng-minlength`]: http://docs.angularjs.org/api/ng.directive:input
595 | [`ng-model`]: http://docs.angularjs.org/api/ng.directive:ngModel
596 | [`ng-multiple`]: http://code.angularjs.org/1.0.8/docs/api/ng.directive:ngMultiple
597 | [`ng-options`]: http://docs.angularjs.org/api/ng.directive:select
598 | [`ng-pattern`]: http://docs.angularjs.org/api/ng.directive:input
599 | [`ng-readonly`]: http://docs.angularjs.org/api/ng.directive:ngReadonly
600 | [`ng-repeat`]: http://docs.angularjs.org/api/ng.directive:ngRepeat
601 | [`ng-required`]: http://docs.angularjs.org/api/ng.directive:input
602 | [`ng-selected`]: http://docs.angularjs.org/api/ng.directive:ngSelected
603 | [`ng-switch`]: http://docs.angularjs.org/api/ng.directive:ngSwitch
604 | [`ng-true-value`]: http://docs.angularjs.org/api/ng.directive:input.checkbox
605 | 
606 | [AngularJS]: http://angularjs.org
607 | [Frank Linehan]: http://frank-code.com
608 | [K. Scott Allen]: http://odetocode.com/about/scott-allen
609 | [OdeToCode]: http://odetocode.com
610 | [Joel Hooks]: http://joelhooks.com
611 | [Florian Rathgeber]: http://florianrathgeber.me/about/
612 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-dynforms",
 3 |   "version": "0.0.4",
 4 |   "homepage": "https://github.com/danhunsaker/angular-dynamic-forms",
 5 |   "authors": [
 6 |     "Daniel Hunsaker <danhunsaker@gmail.com>"
 7 |   ],
 8 |   "description": "Build Forms in AngularJS From Nothing But JSON",
 9 |   "main": "dynamic-forms.js",
10 |   "keywords": [
11 |     "angular",
12 |     "form"
13 |   ],
14 |   "license": "MIT",
15 |   "ignore": [
16 |     "**/.*",
17 |     "node_modules",
18 |     "bower_components",
19 |     "test",
20 |     "tests"
21 |   ]
22 | }
23 | 


--------------------------------------------------------------------------------
/demo/app.js:
--------------------------------------------------------------------------------
  1 | angular.module('app', ['dynform'])
  2 |   .controller('AppCtrl', ['$scope', function ($scope) {
  3 |     $scope.stdFormTemplate = {
  4 |       "fieldset": {
  5 |         "type": "fieldset",
  6 |         "label": "fieldset",
  7 |         "fields": {
  8 |           "text": {
  9 |             "type": "text",
 10 |             "label": "text",
 11 |             "placeholder": "text"
 12 |           },
 13 |           "date": {
 14 |             "type": "date",
 15 |             "label": "date",
 16 |             "placeholder": "date"
 17 |           },
 18 |           "datetime": {
 19 |             "type": "datetime",
 20 |             "label": "datetime",
 21 |             "placeholder": "datetime"
 22 |           },
 23 |           "datetime-local": {
 24 |             "type": "datetime-local",
 25 |             "label": "datetime-local",
 26 |             "placeholder": "datetime-local"
 27 |           },
 28 |           "email": {
 29 |             "type": "email",
 30 |             "label": "email",
 31 |             "placeholder": "email"
 32 |           },
 33 |           "month": {
 34 |             "type": "month",
 35 |             "label": "month",
 36 |             "placeholder": "month"
 37 |           },
 38 |           "coordinates-fieldset": {
 39 |             "type": "fieldset",
 40 |             "label": "nested model example",
 41 |             "fields": {
 42 |               "coordinates.lat": {
 43 |                 "type": "number",
 44 |                 "label": "coordinates.lat",
 45 |                 "placeholder": "coordinates.lat",
 46 |                 "val": 36.5
 47 |               },
 48 |               "coordinates.lon": {
 49 |                 "type": "number",
 50 |                 "label": "coordinates.lon",
 51 |                 "placeholder": "coordinates.lon",
 52 |                 "val": -0.15
 53 |               }
 54 |             }
 55 |           },
 56 |           "number": {
 57 |             "type": "number",
 58 |             "label": "number",
 59 |             "placeholder": "number"
 60 |           },
 61 |           "password": {
 62 |             "type": "password",
 63 |             "label": "password",
 64 |             "placeholder": "password"
 65 |           },
 66 |           "search": {
 67 |             "type": "search",
 68 |             "label": "search",
 69 |             "placeholder": "search"
 70 |           },
 71 |           "tel": {
 72 |             "type": "tel",
 73 |             "label": "tel",
 74 |             "placeholder": "tel"
 75 |           },
 76 |           "textarea": {
 77 |             "type": "textarea",
 78 |             "label": "textarea",
 79 |             "placeholder": "textarea",
 80 |             "splitBy": "\n",
 81 |             "val": ["This array should be","separated by new lines"]
 82 |           },
 83 |           "time": {
 84 |             "type": "time",
 85 |             "label": "time",
 86 |             "placeholder": "time"
 87 |           },
 88 |           "url": {
 89 |             "type": "url",
 90 |             "label": "url",
 91 |             "placeholder": "url"
 92 |           },
 93 |           "week": {
 94 |             "type": "week",
 95 |             "label": "week",
 96 |             "placeholder": "week"
 97 |           }
 98 |         }
 99 |       },
100 |       "checkbox": {
101 |         "type": "checkbox",
102 |         "label": "checkbox"
103 |       },
104 |       "color": {
105 |         "type": "color",
106 |         "label": "color"
107 |       },
108 |       "file": {
109 |         "type": "file",
110 |         "label": "file",
111 |         "multiple": true
112 |       },
113 |       "range": {
114 |         "type": "range",
115 |         "label": "range",
116 |         "model": "number",
117 |         "val": 42,
118 |         "minValue": -42,
119 |         "maxValue": 84
120 |       },
121 |       "select": {
122 |         "type": "select",
123 |         "label": "select",
124 |         "empty": "nothing selected",
125 |         "options": {
126 |           "first": {
127 |             "label": "first option"
128 |           },
129 |           "second": {
130 |             "label": "second option",
131 |             "group": "first group"
132 |           },
133 |           "third": {
134 |             "label": "third option",
135 |             "group": "second group"
136 |           },
137 |           "fourth": {
138 |             "label": "fourth option",
139 |             "group": "first group"
140 |           },
141 |           "fifth": {
142 |             "label": "fifth option"
143 |           },
144 |           "sixth": {
145 |             "label": "sixth option",
146 |             "group": "second group"
147 |           },
148 |           "seventh": {
149 |             "label": "seventh option"
150 |           },
151 |           "eighth": {
152 |             "label": "eighth option",
153 |             "group": "first group"
154 |           },
155 |           "ninth": {
156 |             "label": "ninth option",
157 |             "group": "second group"
158 |           },
159 |           "tenth": {
160 |             "label": "tenth option"
161 |           }
162 |         }
163 |       },
164 |       "checklist": {
165 |         "type": "checklist",
166 |         "label": "checklist",
167 |         "options": {
168 |           "first": {
169 |             "label": "first option"
170 |           },
171 |           "second": {
172 |             "label": "second option",
173 |             "isOn": "on",   //  If you use Angular versions 1.3.x and up, this needs to be changed to "'on'"...
174 |             "isOff": "off"  //  If you use Angular versions 1.3.x and up, this needs to be changed to "'off'"...
175 |           }
176 |         }
177 |       },
178 |       "radio": {
179 |         "type": "radio",
180 |         "label": "radio",
181 |         "values": {
182 |           "first": "first option",
183 |           "second": "second option",
184 |           "third": "third option",
185 |           "fourth": "fourth option",
186 |           "fifth": "fifth option"
187 |         }
188 |       },
189 |       "button": {
190 |         "type": "button",
191 |         "label": "button"
192 |       },
193 |       "hidden": {
194 |         "type": "hidden",
195 |         "label": "hidden",
196 |         "val": "hidden"
197 |       },
198 |       "image": {
199 |         "type": "image",
200 |         "label": "image",
201 |         "source": "http://angularjs.org/img/AngularJS-large.png"
202 |       },
203 |       "legend": {
204 |         "type": "legend",
205 |         "label": "legend"
206 |       },
207 |       "reset": {
208 |         "type": "reset",
209 |         "label": "reset"
210 |       },
211 |       "submit": {
212 |         "type": "submit",
213 |         "label": "submit"
214 |       },
215 |       "bogus": {
216 |         "type": "bogus",
217 |         "label": "bogus"
218 |       }
219 |     };
220 |     $scope.stdFormData = {};
221 |     $scope.urlFormData = {};
222 |   }])
223 |   .filter('pretty', function() {
224 |     return function (input) {
225 |       var temp;
226 |       try {
227 |         temp = angular.fromJson(input);
228 |       }
229 |       catch (e) {
230 |         temp = input;
231 |       }
232 |       
233 |       return angular.toJson(temp, true);
234 |     };
235 |   });
236 | 


--------------------------------------------------------------------------------
/demo/form-template.js:
--------------------------------------------------------------------------------
  1 | [
  2 |   {
  3 |     "type": "bogus",
  4 |     "model": "bogus",
  5 |     "label": "bogus"
  6 |   },
  7 |   {
  8 |     "type": "button",
  9 |     "model": "button",
 10 |     "label": "button"
 11 |   },
 12 |   {
 13 |     "type": "checkbox",
 14 |     "model": "checkbox",
 15 |     "label": "checkbox"
 16 |   },
 17 |   {
 18 |     "type": "checklist",
 19 |     "model": "checklist",
 20 |     "label": "checklist",
 21 |     "options": {
 22 |       "first": {
 23 |         "label": "first option"
 24 |       },
 25 |       "second": {
 26 |         "label": "second option",
 27 |         "isOn": "on",
 28 |         "isOff": "off"
 29 |       }
 30 |     }
 31 |   },
 32 |   {
 33 |     "type": "color",
 34 |     "model": "color",
 35 |     "label": "color"
 36 |   },
 37 |   {
 38 |     "type": "number",
 39 |     "model": "coordinates.lat",
 40 |     "label": "coordinates.lat",
 41 |     "val": 36.5
 42 |   },
 43 |   {
 44 |     "type": "number",
 45 |     "model": "coordinates.lon",
 46 |     "label": "coordinates.lon",
 47 |     "val": -0.15
 48 |   },
 49 |   {
 50 |     "type": "date",
 51 |     "model": "date",
 52 |     "label": "date",
 53 |     "placeholder": "date"
 54 |   },
 55 |   {
 56 |     "type": "datetime",
 57 |     "model": "datetime",
 58 |     "label": "datetime",
 59 |     "placeholder": "datetime"
 60 |   },
 61 |   {
 62 |     "type": "datetime-local",
 63 |     "model": "datetime-local",
 64 |     "label": "datetime-local",
 65 |     "placeholder": "datetime-local"
 66 |   },
 67 |   {
 68 |     "type": "text",
 69 |     "model": "deeply.nested.model.property",
 70 |     "label": "deeply.nested.model.property"
 71 |   },
 72 |   {
 73 |     "type": "email",
 74 |     "model": "email",
 75 |     "label": "email",
 76 |     "placeholder": "email"
 77 |   },
 78 |   {
 79 |     "type": "file",
 80 |     "model": "file",
 81 |     "label": "file",
 82 |     "multiple": true
 83 |   },
 84 |   {
 85 |     "type": "fieldset",
 86 |     "model": "fieldset",
 87 |     "label": "fieldset",
 88 |     "fields": [
 89 |       {
 90 |         "type": "hidden",
 91 |         "model": "hidden",
 92 |         "label": "hidden",
 93 |         "val": "hidden"
 94 |       },
 95 |       {
 96 |         "type": "image",
 97 |         "model": "image",
 98 |         "label": "image",
 99 |         "source": "http://angularjs.org/img/AngularJS-large.png"
100 |       },
101 |       {
102 |         "type": "legend",
103 |         "model": "legend",
104 |         "label": "legend"
105 |       },
106 |       {
107 |         "type": "month",
108 |         "model": "month",
109 |         "label": "month",
110 |         "placeholder": "month"
111 |       },
112 |       {
113 |         "type": "checklist",
114 |         "model": "nested.checklist",
115 |         "label": "nested.checklist",
116 |         "options": {
117 |           "first": {
118 |             "label": "first option"
119 |           },
120 |           "second": {
121 |             "label": "second option",
122 |             "isOn": "on",
123 |             "isOff": "off"
124 |           }
125 |         }
126 |       },
127 |       {
128 |         "type": "number",
129 |         "model": "number",
130 |         "label": "number",
131 |         "placeholder": "number"
132 |       },
133 |       {
134 |         "type": "password",
135 |         "model": "password",
136 |         "label": "password",
137 |         "placeholder": "password"
138 |       },
139 |       {
140 |         "type": "radio",
141 |         "model": "radio",
142 |         "label": "radio",
143 |         "values": {
144 |           "first": "first option",
145 |           "second": "second option",
146 |           "third": "third option",
147 |           "fourth": "fourth option",
148 |           "fifth": "fifth option"
149 |         }
150 |       },
151 |       {
152 |         "type": "range",
153 |         "model": "number",
154 |         "label": "range",
155 |         "val": 42,
156 |         "minValue": -42,
157 |         "maxValue": 84
158 |       }
159 |     ]
160 |   },
161 |   {
162 |     "type": "reset",
163 |     "model": "reset",
164 |     "label": "reset"
165 |   },
166 |   {
167 |     "type": "search",
168 |     "model": "search",
169 |     "label": "search",
170 |     "placeholder": "search"
171 |   },
172 |   {
173 |     "type": "select",
174 |     "model": "select",
175 |     "label": "select",
176 |     "empty": "nothing selected",
177 |     "options": {
178 |       "first": {
179 |         "label": "first option"
180 |       },
181 |       "second": {
182 |         "label": "second option",
183 |         "group": "first group"
184 |       },
185 |       "third": {
186 |         "label": "third option",
187 |         "group": "second group"
188 |       },
189 |       "fourth": {
190 |         "label": "fourth option",
191 |         "group": "first group"
192 |       },
193 |       "fifth": {
194 |         "label": "fifth option"
195 |       },
196 |       "sixth": {
197 |         "label": "sixth option",
198 |         "group": "second group"
199 |       },
200 |       "seventh": {
201 |         "label": "seventh option"
202 |       },
203 |       "eighth": {
204 |         "label": "eighth option",
205 |         "group": "first group"
206 |       },
207 |       "ninth": {
208 |         "label": "ninth option",
209 |         "group": "second group"
210 |       },
211 |       "tenth": {
212 |         "label": "tenth option"
213 |       }
214 |     }
215 |   },
216 |   {
217 |     "type": "submit",
218 |     "model": "submit",
219 |     "label": "submit"
220 |   },
221 |   {
222 |     "type": "tel",
223 |     "model": "tel",
224 |     "label": "tel",
225 |     "placeholder": "tel"
226 |   },
227 |   {
228 |     "type": "text",
229 |     "model": "text",
230 |     "label": "text",
231 |     "placeholder": "text"
232 |   },
233 |   {
234 |     "type": "textarea",
235 |     "model": "textarea",
236 |     "label": "textarea",
237 |     "placeholder": "textarea",
238 |     "splitBy": "\n",
239 |     "val": ["This array should be","separated by new lines"]
240 |   },
241 |   {
242 |     "type": "time",
243 |     "model": "time",
244 |     "label": "time",
245 |     "placeholder": "time"
246 |   },
247 |   {
248 |     "type": "url",
249 |     "model": "url",
250 |     "label": "url",
251 |     "placeholder": "url"
252 |   },
253 |   {
254 |     "type": "week",
255 |     "model": "week",
256 |     "label": "week",
257 |     "placeholder": "week"
258 |   }
259 | ]
260 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html ng-app="app" id="ng-app">
  3 |   <head>
  4 |     <title>Angular Dynamic Forms Test</title>
  5 |     <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
  6 |     <style>
  7 |       .nav,
  8 |       .pagination,
  9 |       .carousel a {
 10 |         cursor: pointer;
 11 |       }
 12 |       
 13 |       .fixed {
 14 |         position: fixed;
 15 |         margin: 0;
 16 |       }
 17 |       
 18 |       [ng-cloak] {
 19 |         display: none;
 20 |       }
 21 |       
 22 |       div.fixed {
 23 |         overflow-y: auto;
 24 |         height: 100%;
 25 |         margin-left: -15px;
 26 |       }
 27 |       
 28 |       pre {
 29 |         margin: 1ex 0;
 30 |       }
 31 |       
 32 |       form,
 33 |       ng-form {
 34 |         border: 1px solid blue;
 35 |         border-radius: 4px;
 36 |         display: block;
 37 |       }
 38 |       
 39 |       fieldset {
 40 |         border: 1px solid blue;
 41 |         border-radius: 4px;
 42 |         display: block;
 43 |         padding: .35em .625em .75em;
 44 |         margin: 0 2px;
 45 |       }
 46 |       
 47 |       legend {
 48 |         font-weight: bold;
 49 |       }
 50 |       
 51 |       fieldset > legend:first-of-type {
 52 |         border: none;
 53 |         margin-bottom: auto;
 54 |         width: inherit;
 55 |         padding: inherit;
 56 |         color: blue;
 57 |       }
 58 |       
 59 |       label,
 60 |       span,
 61 |       form > button,
 62 |       ng-form > button,
 63 |       form > input,
 64 |       ng-form > input {
 65 |         width: 48%;
 66 |         padding: 1ex 1em;
 67 |       }
 68 |       
 69 |       label > input,
 70 |       label > select,
 71 |       label > textarea {
 72 |         float: right;
 73 |         width: 60%;
 74 |       }
 75 |       
 76 |       label div > label {
 77 |         display: block;
 78 |         padding: 1ex;
 79 |         width: 100%;
 80 |       }
 81 |     </style>
 82 |     <!--[if lte IE 8]>
 83 |       <script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.1/json3.min.js"></script>
 84 |       <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.3.0/es5-shim.min.js"></script>
 85 |       <script>
 86 |         document.createElement('ng-include');
 87 |         document.createElement('ng-pluralize');
 88 |         document.createElement('ng-view');
 89 |         document.createElement('ng-form');
 90 |         document.createElement('dynamic-form');
 91 |         
 92 |         // Optionally these for CSS
 93 |         document.createElement('ng:include');
 94 |         document.createElement('ng:pluralize');
 95 |         document.createElement('ng:view');
 96 |         document.createElement('ng:form');
 97 |         
 98 |         $(document).ready(function() {
 99 |           angular.bootstrap(document.documentElement);
100 |         });
101 |       </script>
102 |     <![endif]-->
103 |   </head>
104 |   <body ng-controller="AppCtrl" ng-cloak="">
105 |     <p>This demo is a really ugly example of the basic functionality of this module.  Have a look
106 |       through the code and get a feel for how everything works.</p>
107 |     <dynamic-form class="col-md-8" template-url="form-template.js" ng-model="urlFormData">
108 |       <dynamic-form class="col-md-12" template="stdFormTemplate" ng-model="stdFormData">
109 |         <legend>template= test</legend>
110 |       </dynamic-form>
111 |       <legend>templateUrl= test</legend>
112 |     </dynamic-form>
113 |     <div class="col-md-4">
114 |       <div class="fixed col-md-4">
115 |         <pre>stdFormData: {{stdFormData | pretty}}</pre>
116 |         <pre>urlFormData: {{urlFormData | pretty}}</pre>
117 |       </div>
118 |     </div>
119 |     <!-- Load scripts at the end for performance. -->
120 |     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
121 |     <script src="../dynamic-forms.js"></script>
122 |     <script src="app.js"></script>
123 |   </body>
124 | </html>
125 | 


--------------------------------------------------------------------------------
/dynamic-forms.js:
--------------------------------------------------------------------------------
  1 | /**
  2 | * DynamicForms - Build Forms in AngularJS From Nothing But JSON
  3 | * @version v0.0.4 - 2014-11-16
  4 | * @link http://github.com/danhunsaker/angular-dynamic-forms
  5 | * @license MIT, http://opensource.org/licenses/MIT
  6 | */
  7 | 
  8 | /**
  9 | * Dynamically build an HTML form using a JSON array/object as a template.
 10 | *
 11 | * @todo Properly describe this directive.
 12 | * @param {mixed} [template] - The form template itself, as an array or object.
 13 | * @param {string} [templateUrl] - The URL to retrieve the form template from; template overrides.
 14 | * @param {Object} ngModel - An object in the current scope where the form data should be stored.
 15 | * @example <dynamic-form template-url="form-template.js" ng-model="formData"></dynamic-form>
 16 | */
 17 | angular.module('dynform', [])
 18 |   .directive('dynamicForm', ['$q', '$parse', '$http', '$templateCache', '$compile', '$document', '$timeout', function ($q, $parse, $http, $templateCache, $compile, $document, $timeout) {
 19 |     var supported = {
 20 |         //  Text-based elements
 21 |         'text': {element: 'input', type: 'text', editable: true, textBased: true},
 22 |         'date': {element: 'input', type: 'date', editable: true, textBased: true},
 23 |         'datetime': {element: 'input', type: 'datetime', editable: true, textBased: true},
 24 |         'datetime-local': {element: 'input', type: 'datetime-local', editable: true, textBased: true},
 25 |         'email': {element: 'input', type: 'email', editable: true, textBased: true},
 26 |         'month': {element: 'input', type: 'month', editable: true, textBased: true},
 27 |         'number': {element: 'input', type: 'number', editable: true, textBased: true},
 28 |         'password': {element: 'input', type: 'password', editable: true, textBased: true},
 29 |         'search': {element: 'input', type: 'search', editable: true, textBased: true},
 30 |         'tel': {element: 'input', type: 'tel', editable: true, textBased: true},
 31 |         'textarea': {element: 'textarea', editable: true, textBased: true},
 32 |         'time': {element: 'input', type: 'time', editable: true, textBased: true},
 33 |         'url': {element: 'input', type: 'url', editable: true, textBased: true},
 34 |         'week': {element: 'input', type: 'week', editable: true, textBased: true},
 35 |         //  Specialized editables
 36 |         'checkbox': {element: 'input', type: 'checkbox', editable: true, textBased: false},
 37 |         'color': {element: 'input', type: 'color', editable: true, textBased: false},
 38 |         'file': {element: 'input', type: 'file', editable: true, textBased: false},
 39 |         'range': {element: 'input', type: 'range', editable: true, textBased: false},
 40 |         'select': {element: 'select', editable: true, textBased: false},
 41 |         //  Pseudo-non-editables (containers)
 42 |         'checklist': {element: 'div', editable: false, textBased: false},
 43 |         'fieldset': {element: 'fieldset', editable: false, textBased: false},
 44 |         'radio': {element: 'div', editable: false, textBased: false},
 45 |         //  Non-editables (mostly buttons)
 46 |         'button': {element: 'button', type: 'button', editable: false, textBased: false},
 47 |         'hidden': {element: 'input', type: 'hidden', editable: false, textBased: false},
 48 |         'image': {element: 'input', type: 'image', editable: false, textBased: false},
 49 |         'legend': {element: 'legend', editable: false, textBased: false},
 50 |         'reset': {element: 'button', type: 'reset', editable: false, textBased: false},
 51 |         'submit': {element: 'button', type: 'submit', editable: false, textBased: false}
 52 |       };
 53 |     
 54 |     return {
 55 |       restrict: 'E', // supports using directive as element only
 56 |       link: function ($scope, element, attrs) {
 57 |         //  Basic initialization
 58 |         var newElement = null,
 59 |           newChild = null,
 60 |           optGroups = {},
 61 |           cbAtt = '',
 62 |           foundOne = false,
 63 |           iterElem = element,
 64 |           model = null;
 65 |         
 66 |         //  Check that the required attributes are in place
 67 |         if (angular.isDefined(attrs.ngModel) && (angular.isDefined(attrs.template) || angular.isDefined(attrs.templateUrl)) && !element.hasClass('dynamic-form')) {
 68 |           model = $parse(attrs.ngModel)($scope);
 69 |           //  Grab the template. either from the template attribute, or from the URL in templateUrl
 70 |           (attrs.template ? $q.when($parse(attrs.template)($scope)) :
 71 |             $http.get(attrs.templateUrl, {cache: $templateCache}).then(function (result) {
 72 |               return result.data;
 73 |             })
 74 |           ).then(function (template) {
 75 |             var setProperty = function (obj, props, value, lastProp, buildParent) {
 76 |               props = props.split('.');
 77 |               lastProp = lastProp || props.pop();
 78 |               
 79 |               for (var i = 0; i < props.length; i++) {
 80 |                 obj = obj[props[i]] = obj[props[i]] || {};
 81 |               }
 82 |               
 83 |               if (!buildParent) {
 84 |                 obj[lastProp] = value;
 85 |               }
 86 |             },
 87 |             bracket = function (model, base) {
 88 |               props = model.split('.');
 89 |               return (base || props.shift()) + (props.length ? "['" + props.join("']['") + "']" : '');
 90 |             },
 91 |             buildFields = function (field, id) {
 92 |               if (String(id).charAt(0) == '$') {
 93 |                 // Don't process keys added by Angular...  See GitHub Issue #29
 94 |                 return;
 95 |               }
 96 |               else if (!angular.isDefined(supported[field.type]) || supported[field.type] === false) {
 97 |                 //  Unsupported.  Create SPAN with field.label as contents
 98 |                 newElement = angular.element('<span></span>');
 99 |                 if (angular.isDefined(field.label)) {angular.element(newElement).html(field.label);}
100 |                 angular.forEach(field, function (val, attr) {
101 |                   if (["label", "type"].indexOf(attr) > -1) {return;}
102 |                   newElement.attr(attr, val);
103 |                 });
104 |                 this.append(newElement);
105 |                 newElement = null;
106 |               }
107 |               else {
108 |                 //  Supported.  Create element (or container) according to type
109 |                 if (!angular.isDefined(field.model)) {
110 |                   field.model = id;
111 |                 }
112 |                 
113 |                 newElement = angular.element($document[0].createElement(supported[field.type].element));
114 |                 if (angular.isDefined(supported[field.type].type)) {
115 |                   newElement.attr('type', supported[field.type].type);
116 |                 }
117 |                 
118 |                 //  Editable fields (those that can feed models)
119 |                 if (angular.isDefined(supported[field.type].editable) && supported[field.type].editable) {
120 |                   newElement.attr('name', bracket(field.model));
121 |                   newElement.attr('ng-model', bracket(field.model, attrs.ngModel));
122 |                   // Build parent in case of a nested model
123 |                   setProperty(model, field.model, {}, null, true);
124 |                     
125 |                   if (angular.isDefined(field.readonly)) {newElement.attr('ng-readonly', field.readonly);}
126 |                   if (angular.isDefined(field.required)) {newElement.attr('ng-required', field.required);}
127 |                   if (angular.isDefined(field.val)) {
128 |                     setProperty(model, field.model, angular.copy(field.val));
129 |                     newElement.attr('value', field.val);
130 |                   }
131 |                 }
132 |                 
133 |                 //  Fields based on input type=text
134 |                 if (angular.isDefined(supported[field.type].textBased) && supported[field.type].textBased) {
135 |                   if (angular.isDefined(field.minLength)) {newElement.attr('ng-minlength', field.minLength);}
136 |                   if (angular.isDefined(field.maxLength)) {newElement.attr('ng-maxlength', field.maxLength);}
137 |                   if (angular.isDefined(field.validate)) {newElement.attr('ng-pattern', field.validate);}
138 |                   if (angular.isDefined(field.placeholder)) {newElement.attr('placeholder', field.placeholder);}
139 |                 }
140 |                 
141 |                 //  Special cases
142 |                 if (field.type === 'number' || field.type === 'range') {
143 |                   if (angular.isDefined(field.minValue)) {newElement.attr('min', field.minValue);}
144 |                   if (angular.isDefined(field.maxValue)) {newElement.attr('max', field.maxValue);}
145 |                   if (angular.isDefined(field.step)) {newElement.attr('step', field.step);}
146 |                 }
147 |                 else if (['text', 'textarea'].indexOf(field.type) > -1) {
148 |                   if (angular.isDefined(field.splitBy)) {newElement.attr('ng-list', field.splitBy);}
149 |                 }
150 |                 else if (field.type === 'checkbox') {
151 |                   if (angular.isDefined(field.isOn)) {newElement.attr('ng-true-value', field.isOn);}
152 |                   if (angular.isDefined(field.isOff)) {newElement.attr('ng-false-value', field.isOff);}
153 |                   if (angular.isDefined(field.slaveTo)) {newElement.attr('ng-checked', field.slaveTo);}
154 |                 }
155 |                 else if (field.type === 'checklist') {
156 |                   if (angular.isDefined(field.val)) {
157 |                     setProperty(model, field.model, angular.copy(field.val));
158 |                   }
159 |                   if (angular.isDefined(field.options)) {
160 |                     if (! (angular.isDefined(model[field.model]) && angular.isObject(model[field.model]))) {
161 |                       setProperty(model, field.model, {});
162 |                     }
163 |                     angular.forEach(field.options, function (option, childId) {
164 |                       newChild = angular.element('<input type="checkbox" />');
165 |                       newChild.attr('name', bracket(field.model + '.' + childId));
166 |                       newChild.attr('ng-model', bracket(field.model + "." + childId, attrs.ngModel));
167 |                       if (angular.isDefined(option['class'])) {newChild.attr('ng-class', option['class']);}
168 |                       if (angular.isDefined(field.disabled)) {newChild.attr('ng-disabled', field.disabled);}
169 |                       if (angular.isDefined(field.readonly)) {newChild.attr('ng-readonly', field.readonly);}
170 |                       if (angular.isDefined(field.required)) {newChild.attr('ng-required', field.required);}
171 |                       if (angular.isDefined(field.callback)) {newChild.attr('ng-change', field.callback);}
172 |                       if (angular.isDefined(option.isOn)) {newChild.attr('ng-true-value', option.isOn);}
173 |                       if (angular.isDefined(option.isOff)) {newChild.attr('ng-false-value', option.isOff);}
174 |                       if (angular.isDefined(option.slaveTo)) {newChild.attr('ng-checked', option.slaveTo);}
175 |                       if (angular.isDefined(option.val)) {
176 |                         setProperty(model, field.model, angular.copy(option.val), childId);
177 |                         newChild.attr('value', option.val);
178 |                       }
179 |                       
180 |                       if (angular.isDefined(option.label)) {
181 |                           newChild = newChild.wrap('<label></label>').parent();
182 |                           newChild.append(document.createTextNode(' ' + option.label));
183 |                       }
184 |                       newElement.append(newChild);
185 |                     });
186 |                   }
187 |                 }
188 |                 else if (field.type === 'radio') {
189 |                   if (angular.isDefined(field.val)) {
190 |                     setProperty(model, field.model, angular.copy(field.val));
191 |                   }
192 |                   if (angular.isDefined(field.values)) {
193 |                     angular.forEach(field.values, function (label, val) {
194 |                       newChild = angular.element('<input type="radio" />');
195 |                       newChild.attr('name', bracket(field.model));
196 |                       newChild.attr('ng-model', bracket(field.model, attrs.ngModel));
197 |                       if (angular.isDefined(field['class'])) {newChild.attr('ng-class', field['class']);}
198 |                       if (angular.isDefined(field.disabled)) {newChild.attr('ng-disabled', field.disabled);}
199 |                       if (angular.isDefined(field.callback)) {newChild.attr('ng-change', field.callback);}
200 |                       if (angular.isDefined(field.readonly)) {newChild.attr('ng-readonly', field.readonly);}
201 |                       if (angular.isDefined(field.required)) {newChild.attr('ng-required', field.required);}
202 |                       newChild.attr('value', val);
203 |                       if (angular.isDefined(field.val) && field.val === val) {newChild.attr('checked', 'checked');}
204 |                       
205 |                       if (label) {
206 |                           newChild = newChild.wrap('<label></label>').parent();
207 |                           newChild.append(document.createTextNode(' ' + label));
208 |                       }
209 |                       newElement.append(newChild);
210 |                     });
211 |                   }
212 |                 }
213 |                 else if (field.type === 'select') {
214 |                   if (angular.isDefined(field.multiple) && field.multiple !== false) {newElement.attr('multiple', 'multiple');}
215 |                   if (angular.isDefined(field.empty) && field.empty !== false) {newElement.append(angular.element($document[0].createElement('option')).attr('value', '').html(field.empty));}
216 |                   
217 |                   if (angular.isDefined(field.autoOptions)) {
218 |                     newElement.attr('ng-options', field.autoOptions);
219 |                   }
220 |                   else if (angular.isDefined(field.options)) {
221 |                     angular.forEach(field.options, function (option, childId) {
222 |                       newChild = angular.element($document[0].createElement('option'));
223 |                       newChild.attr('value', childId);
224 |                       if (angular.isDefined(option.disabled)) {newChild.attr('ng-disabled', option.disabled);}
225 |                       if (angular.isDefined(option.slaveTo)) {newChild.attr('ng-selected', option.slaveTo);}
226 |                       if (angular.isDefined(option.label)) {newChild.html(option.label);}
227 |                       if (angular.isDefined(option.group)) {
228 |                         if (!angular.isDefined(optGroups[option.group])) {
229 |                           optGroups[option.group] = angular.element($document[0].createElement('optgroup'));
230 |                           optGroups[option.group].attr('label', option.group);
231 |                         }
232 |                         optGroups[option.group].append(newChild);
233 |                       }
234 |                       else {
235 |                         newElement.append(newChild);
236 |                       }
237 |                     });
238 |                     
239 |                     if (!angular.equals(optGroups, {})) {
240 |                       angular.forEach(optGroups, function (optGroup) {
241 |                         newElement.append(optGroup);
242 |                       });
243 |                       optGroups = {};
244 |                     }
245 |                   }
246 |                 }
247 |                 else if (field.type === 'image') {
248 |                   if (angular.isDefined(field.label)) {newElement.attr('alt', field.label);}
249 |                   if (angular.isDefined(field.source)) {newElement.attr('src', field.source);}
250 |                 }
251 |                 else if (field.type === 'hidden') {
252 |                   newElement.attr('name', bracket(field.model));
253 |                   newElement.attr('ng-model', bracket(field.model, attrs.ngModel));
254 |                   if (angular.isDefined(field.val)) {
255 |                     setProperty(model, field.model, angular.copy(field.val));
256 |                     newElement.attr('value', field.val);
257 |                   }
258 |                 }
259 |                 else if (field.type === 'file') {
260 |                   if (angular.isDefined(field.multiple)) {
261 |                     newElement.attr('multiple', field.multiple);
262 |                   }
263 |                 }
264 |                 else if (field.type === 'fieldset') {
265 |                   if (angular.isDefined(field.fields)) {
266 |                     var workingElement = newElement;
267 |                     angular.forEach(field.fields, buildFields, newElement);
268 |                     newElement = workingElement;
269 |                   }
270 |                 }
271 |                 
272 |                 //  Common attributes; radio already applied these...
273 |                 if (field.type !== "radio") {
274 |                   if (angular.isDefined(field['class'])) {newElement.attr('ng-class', field['class']);}
275 |                   //  ...and checklist has already applied these.
276 |                   if (field.type !== "checklist") {
277 |                     if (angular.isDefined(field.disabled)) {newElement.attr('ng-disabled', field.disabled);}
278 |                     if (angular.isDefined(field.callback)) {
279 |                       //  Some input types need listeners on click...
280 |                       if (["button", "fieldset", "image", "legend", "reset", "submit"].indexOf(field.type) > -1) {
281 |                         cbAtt = 'ng-click';
282 |                       }
283 |                       //  ...the rest on change.
284 |                       else {
285 |                         cbAtt = 'ng-change';
286 |                       }
287 |                       newElement.attr(cbAtt, field.callback);
288 |                     }
289 |                   }
290 |                 }
291 |                 
292 |                 //  If there's a label, add it.
293 |                 if (angular.isDefined(field.label)) {
294 |                   //  Some elements have already applied their labels.
295 |                   if (["image", "hidden"].indexOf(field.type) > -1) {
296 |                     angular.noop();
297 |                   }
298 |                   //  Fieldset elements put their labels in legend child elements.
299 |                   else if (["fieldset"].indexOf(field.type) > -1) {
300 |                     newElement.prepend(angular.element($document[0].createElement('legend')).html(field.label));
301 |                   }
302 |                   //  Button elements get their labels from their contents.
303 |                   else if (["button", "legend", "reset", "submit"].indexOf(field.type) > -1) {
304 |                     newElement.html(field.label);
305 |                   }
306 |                   //  Everything else should be wrapped in a label tag.
307 |                   else {
308 |                     newElement = newElement.wrap('<label></label>').parent();
309 |                     newElement.prepend(document.createTextNode(field.label + ' '));
310 |                   }
311 |                 }
312 |                 
313 |                 // Arbitrary attributes
314 |                 if (angular.isDefined(field.attributes)) {
315 |                   angular.forEach(field.attributes, function (val, attr) {
316 |                     newElement.attr(attr, val);
317 |                   });
318 |                 }
319 |                 
320 |                 // Add the element to the page
321 |                 this.append(newElement);
322 |                 newElement = null;
323 |               }
324 |             };
325 |             
326 |             angular.forEach(template, buildFields, element);
327 |             
328 |             //  Determine what tag name to use (ng-form if nested; form if outermost)
329 |             while (!angular.equals(iterElem.parent(), $document) && !angular.equals(iterElem[0], $document[0].documentElement)) {
330 |               if (['form','ngForm','dynamicForm'].indexOf(attrs.$normalize(angular.lowercase(iterElem.parent()[0].nodeName))) > -1) {
331 |                 foundOne = true;
332 |                 break;
333 |               }
334 |               iterElem = iterElem.parent();
335 |             }
336 |             if (foundOne) {
337 |               newElement = angular.element($document[0].createElement('ng-form'));
338 |             }
339 |             else {
340 |               newElement = angular.element("<form></form>");
341 |             }
342 |             
343 |             //  Psuedo-transclusion
344 |             angular.forEach(attrs.$attr, function(attName, attIndex) {
345 |               newElement.attr(attName, attrs[attIndex]);
346 |             });
347 |             newElement.attr('model', attrs.ngModel);
348 |             newElement.removeAttr('ng-model');
349 |             angular.forEach(element[0].classList, function(clsName) {
350 |               newElement[0].classList.add(clsName);
351 |             });
352 |             newElement.addClass('dynamic-form');
353 |             newElement.append(element.contents());
354 |             
355 |             //  onReset logic
356 |             newElement.data('$_cleanModel', angular.copy(model));
357 |             newElement.bind('reset', function () {
358 |               $timeout(function () {
359 |                 $scope.$broadcast('reset', arguments);
360 |               }, 0);
361 |             });
362 |             $scope.$on('reset', function () {
363 |               $scope.$apply(function () {
364 |                 $scope[attrs.ngModel] = {};
365 |               });
366 |               $scope.$apply(function () {
367 |                 $scope[attrs.ngModel] = angular.copy(newElement.data('$_cleanModel'));
368 |               });
369 |             });
370 |             
371 |             //  Compile and update DOM
372 |             $compile(newElement)($scope);
373 |             element.replaceWith(newElement);
374 |           });
375 |         }
376 |       }
377 |     };
378 |   }])
379 |   //  Not a fan of how Angular's ngList is implemented, so here's a better one (IMO).  It will ONLY
380 |   //  apply to <dynamic-form> child elements, and replaces the ngList that ships with Angular.
381 |   .directive('ngList', [function () {
382 |     return {
383 |       require: '?ngModel',
384 |       link: function (scope, element, attr, ctrl) {
385 |         var match = /\/(.*)\//.exec(element.attr(attr.$attr.ngList)),
386 |           separator = match && new RegExp(match[1]) || element.attr(attr.$attr.ngList) || ',';
387 |         
388 |         if (element[0].form !== null && !angular.element(element[0].form).hasClass('dynamic-form')) {
389 |           return;
390 |         }
391 |         
392 |         ctrl.$parsers.splice(0, 1);
393 |         ctrl.$formatters.splice(0, 1);
394 |         
395 |         ctrl.$parsers.push(function(viewValue) {
396 |           var list = [];
397 |           
398 |           if (angular.isString(viewValue)) {
399 |             //  Don't have Angular's trim() exposed, so let's simulate it:
400 |             if (String.prototype.trim) {
401 |               angular.forEach(viewValue.split(separator), function(value) {
402 |                 if (value) list.push(value.trim());
403 |               });
404 |             }
405 |             else {
406 |               angular.forEach(viewValue.split(separator), function(value) {
407 |                 if (value) list.push(value.replace(/^\s*/, '').replace(/\s*$/, ''));
408 |               });
409 |             }
410 |           }
411 |           
412 |           return list;
413 |         });
414 | 
415 |         ctrl.$formatters.push(function(val) {
416 |           var joinBy = angular.isString(separator) && separator || ', ';
417 |           
418 |           if (angular.isArray(val)) {
419 |             return val.join(joinBy);
420 |           }
421 |           
422 |           return undefined;
423 |         });
424 |       }
425 |     };
426 |   }])
427 |   //  Following code was adapted from http://odetocode.com/blogs/scott/archive/2013/07/05/a-file-input-directive-for-angularjs.aspx
428 |   .directive('input', ['$parse', function ($parse) {
429 |     return {
430 |       restrict: 'E',
431 |       require: '?ngModel',
432 |       link: function (scope, element, attrs, ctrl) {
433 |         if (!ctrl) {
434 |           // Doesn't have an ng-model attribute; nothing to do here.
435 |           return;
436 |         }
437 |         
438 |         if (attrs.type === 'file') {
439 |           var modelGet = $parse(attrs.ngModel),
440 |             modelSet = modelGet.assign,
441 |             onChange = $parse(attrs.onChange),
442 |             updateModel = function () {
443 |               scope.$apply(function () {
444 |                 modelSet(scope, element[0].files);
445 |                 onChange(scope);
446 |               });                    
447 |             };
448 |           
449 |           ctrl.$render = function () {
450 |             element[0].files = this.$viewValue;
451 |           };
452 |           element.bind('change', updateModel);
453 |         }
454 |         else if (attrs.type === 'range') {
455 |           ctrl.$parsers.push(function (val) {
456 |             if (val) {
457 |               return parseFloat(val);
458 |             }
459 |           });
460 |         }
461 |       }
462 |     };
463 |   }])
464 |   //  Following code was adapted from http://odetocode.com/blogs/scott/archive/2013/07/03/building-a-filereader-service-for-angularjs-the-service.aspx
465 |   .factory('fileReader', ['$q', function ($q) {
466 |     var onLoad = function(reader, deferred, scope) {
467 |         return function () {
468 |           scope.$apply(function () {
469 |             deferred.resolve(reader.result);
470 |           });
471 |         };
472 |       },
473 |       onError = function (reader, deferred, scope) {
474 |         return function () {
475 |           scope.$apply(function () {
476 |             deferred.reject(reader.error);
477 |           });
478 |         };
479 |       },
480 |       onProgress = function(reader, scope) {
481 |         return function (event) {
482 |           scope.$broadcast('fileProgress',
483 |             {
484 |               total: event.total,
485 |               loaded: event.loaded,
486 |               status: reader.readyState
487 |             });
488 |         };
489 |       },
490 |       getReader = function(deferred, scope) {
491 |         var reader = new FileReader();
492 |         reader.onload = onLoad(reader, deferred, scope);
493 |         reader.onerror = onError(reader, deferred, scope);
494 |         reader.onprogress = onProgress(reader, scope);
495 |         return reader;
496 |       };
497 | 
498 |     return {
499 |       readAsArrayBuffer: function (file, scope) {
500 |         var deferred = $q.defer(),
501 |           reader = getReader(deferred, scope);         
502 |         reader.readAsArrayBuffer(file);
503 |         return deferred.promise;
504 |       },
505 |       readAsBinaryString: function (file, scope) {
506 |         var deferred = $q.defer(),
507 |           reader = getReader(deferred, scope);         
508 |         reader.readAsBinaryString(file);
509 |         return deferred.promise;
510 |       },
511 |       readAsDataURL: function (file, scope) {
512 |         var deferred = $q.defer(),
513 |           reader = getReader(deferred, scope);         
514 |         reader.readAsDataURL(file);
515 |         return deferred.promise;
516 |       },
517 |       readAsText: function (file, scope) {
518 |         var deferred = $q.defer(),
519 |           reader = getReader(deferred, scope);         
520 |         reader.readAsText(file);
521 |         return deferred.promise;
522 |       }
523 |     };
524 |   }]);
525 | 
526 | /*  End of dynamic-forms.js */
527 | 


--------------------------------------------------------------------------------