Various tweaks for v0.0.3

- Bumped version number in bower.json, and dynamic-forms.js DocComment. - More clarity for arrays being a valid option for a template. - Point to GitHub instead of BitBucket as the default repo, since more users are on GH. - Clean up indentation in the demo files. - Reorder new sample fields in the demo templates for consistency with existing ordering (alphabetical in form-template.js; alphabetical within control-type groups in app.js). - Added comment in app.js about the need to update `isOn` and `isOff` values in 1.3.x. Signed-off-by: Dan Hunsaker <[email protected]>
danhunsaker · Nov 14, 2014 · 2ac7c27 · 2ac7c27
1 parent 3274c21
commit 2ac7c27
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 70 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-dynamic-forms",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "homepage": "https://github.com/danhunsaker/angular-dynamic-forms",
   "authors": [
     "Daniel Hunsaker <[email protected]>"

diff --git a/demo/app.js b/demo/app.js
@@ -35,6 +35,24 @@ angular.module('app', ['dynform'])
             "label": "month",
             "placeholder": "month"
           },
+          "coordinates-fieldset": {
+            "type": "fieldset",
+            "label": "nested model example",
+            "fields": {
+              "coordinates.lat": {
+                "type": "number",
+                "label": "coordinates.lat",
+                "placeholder": "coordinates.lat",
+                "val": 36.5
+              },
+              "coordinates.lon": {
+                "type": "number",
+                "label": "coordinates.lon",
+                "placeholder": "coordinates.lon",
+                "val": -0.15
+              }
+            }
+          },
           "number": {
             "type": "number",
             "label": "number",
@@ -76,16 +94,6 @@ angular.module('app', ['dynform'])
             "type": "week",
             "label": "week",
             "placeholder": "week"
-          },
-          "coordinates.lat": {
-            "type": "number",
-            "label": "coordinates.lat",
-            "placeholder": 36.5
-          },
-          "coordinates.lon": {
-            "type": "number",
-            "label": "coordinates.lon",
-            "placeholder": -0.15
           }
         }
       },
@@ -162,8 +170,8 @@ angular.module('app', ['dynform'])
           },
           "second": {
             "label": "second option",
-            "isOn": "on",
-            "isOff": "off"
+            "isOn": "on",   //  If you use Angular versions 1.3.x and up, this needs to be changed to "'on'"...
+            "isOff": "off"  //  If you use Angular versions 1.3.x and up, this needs to be changed to "'off'"...
           }
         }
       },

diff --git a/demo/form-template.js b/demo/form-template.js
@@ -34,6 +34,18 @@
     "model": "color",
     "label": "color"
   },
+  {
+    "type": "number",
+    "model": "coordinates.lat",
+    "label": "coordinates.lat",
+    "val": 36.5
+  },
+  {
+    "type": "number",
+    "model": "coordinates.lon",
+    "label": "coordinates.lon",
+    "val": -0.15
+  },
   {
     "type": "date",
     "model": "date",
@@ -52,6 +64,11 @@
     "label": "datetime-local",
     "placeholder": "datetime-local"
   },
+  {
+    "type": "text",
+    "model": "deeply.nested.model.property",
+    "label": "deeply.nested.model.property"
+  },
   {
     "type": "email",
     "model": "email",
@@ -81,6 +98,17 @@
         "label": "image",
         "source": "http://angularjs.org/img/AngularJS-large.png"
       },
+      {
+        "type": "legend",
+        "model": "legend",
+        "label": "legend"
+      },
+      {
+        "type": "month",
+        "model": "month",
+        "label": "month",
+        "placeholder": "month"
+      },
       {
         "type": "checklist",
         "model": "nested.checklist",
@@ -96,17 +124,6 @@
           }
         }
       },
-      {
-        "type": "legend",
-        "model": "legend",
-        "label": "legend"
-      },
-      {
-        "type": "month",
-        "model": "month",
-        "label": "month",
-        "placeholder": "month"
-      },
       {
         "type": "number",
         "model": "number",
@@ -138,11 +155,6 @@
         "val": 42,
         "minValue": -42,
         "maxValue": 84
-      },
-      {
-        "type": "text",
-        "model": "deeply.nested.model.property",
-        "label": "deeply.nested.model.property"
       }
     ]
   },
@@ -243,17 +255,5 @@
     "model": "week",
     "label": "week",
     "placeholder": "week"
-  },
-  {
-    "type": "number",
-    "model": "coordinates.lat",
-    "label": "coordinates.lat",
-    "val": 36.5
-  },
-  {
-    "type": "number",
-    "model": "coordinates.lon",
-    "label": "coordinates.lon",
-    "val": -0.15
   }
 ]
diff --git a/demo/index.html b/demo/index.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
-<html ng-app="app" id="ng-app">
-  <head>
+<html ng-app="app" id="ng-app">
+  <head>
     <title>Angular Dynamic Forms Test</title>
     <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
     <style>
@@ -70,15 +70,15 @@
       label > select,
       label > textarea {
         float: right;
-              width: 60%;
+        width: 60%;
       }
 
       label div > label {
         display: block;
         padding: 1ex;
-              width: 100%;
+        width: 100%;
       }
-    </style>
+    </style>
     <!--[if lte IE 8]>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.1/json3.min.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.3.0/es5-shim.min.js"></script>
@@ -96,29 +96,29 @@
         document.createElement('ng:form');
         
         $(document).ready(function() {
-          angular.bootstrap(document);
+          angular.bootstrap(document.documentElement);
         });
       </script>
     <![endif]-->
-  </head>
+  </head>
   <body ng-controller="AppCtrl" ng-cloak="">
     <p>This demo is a really ugly example of the basic functionality of this module.  Have a look
-    through the code and get a feel for how everything works.</p>
-  <dynamic-form class="col-md-8" template-url="form-template.js" ng-model="urlFormData">
-    <dynamic-form class="col-md-12" template="stdFormTemplate" ng-model="stdFormData">
-      <legend>template= test</legend>
+      through the code and get a feel for how everything works.</p>
+    <dynamic-form class="col-md-8" template-url="form-template.js" ng-model="urlFormData">
+      <dynamic-form class="col-md-12" template="stdFormTemplate" ng-model="stdFormData">
+        <legend>template= test</legend>
+      </dynamic-form>
+      <legend>templateUrl= test</legend>
     </dynamic-form>
-    <legend>templateUrl= test</legend>
-  </dynamic-form>
-  <div class="col-md-4">
-    <div class="fixed col-md-4">
-      <pre>stdFormData: {{stdFormData | pretty}}</pre>
-      <pre>urlFormData: {{urlFormData | pretty}}</pre>
+    <div class="col-md-4">
+      <div class="fixed col-md-4">
+        <pre>stdFormData: {{stdFormData | pretty}}</pre>
+        <pre>urlFormData: {{urlFormData | pretty}}</pre>
+      </div>
     </div>
-  </div>
-  <!-- Load scripts at the end for performance. -->
-  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
-  <script src="../dynamic-forms.js"></script>
-  <script src="app.js"></script>
-  </body>
-</html>
+    <!-- Load scripts at the end for performance. -->
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
+    <script src="../dynamic-forms.js"></script>
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/dynamic-forms.js b/dynamic-forms.js
@@ -1,17 +1,17 @@
 /**
 * DynamicForms - Build Forms in AngularJS From Nothing But JSON
-* @version v0.0.2 - 2014-04-29
-* @link http://bitbucket.org/danhunsaker/angular-dynamic-forms
+* @version v0.0.3 - 2014-11-14
+* @link http://github.com/danhunsaker/angular-dynamic-forms
 * @license MIT, http://opensource.org/licenses/MIT
 */
 
 /**
-* Dynamically build an HTML form using a JSON object as a template.
+* Dynamically build an HTML form using a JSON array/object as a template.
 *
 * @todo Properly describe this directive.
-* @param {Object} [template] - The form template itself, as an object.
+* @param {mixed} [template] - The form template itself, as an array or object.
 * @param {string} [templateUrl] - The URL to retrieve the form template from; template overrides.
-* @param {mixed} ngModel - An object in the current scope where the form data should be stored.
+* @param {Object} ngModel - An object in the current scope where the form data should be stored.
 * @example <dynamic-form template-url="form-template.js" ng-model="formData"></dynamic-form>
 */
 angular.module('dynform', [])