Merge branch 'feature/conditionsconditionsconditions' into development

Author: davidlgj

docs/index.md

@@ -17,7 +17,6 @@ Documentation
     1. [copyValueTo](#copyvalueto)
 1. [Specific options and types](#specific-options-and-types)
     1. [fieldset and section](#fieldset-and-section)
-    1. [conditional](#conditional)
     1. [select and checkboxes](#select-and-checkboxes)
     1. [actions](#actions)
     1. [button](#button)
@@ -29,6 +28,7 @@ Documentation
 1. [Post process function](#post-process-function)
 1. [Events](#events)
 1. [Manual field insertion](#manual-field-insertion)
+1. [Deprecated fields](#deprecated-fields)
 1. [Extending Schema Form](extending.md)
 
 Basic Usage
@@ -208,7 +208,6 @@ Schema Form currently supports the following form field types out of the box:
 |:--------------|:------------------------|
 | fieldset      |  a fieldset with legend |
 | section       |  just a div             |
-| conditional   |  a section with a ```ng-if``` |
 | actions       |  horizontal button list, can only submit and buttons as items |
 | text          |  input with type text   |
 | textarea      |  a textarea             |
@@ -343,7 +342,8 @@ General options most field types can handle:
                                // and their items will inherit it.
   htmlClass: "street foobar",  // CSS Class(es) to be added to the container div
   fieldHtmlClass: "street"     // CSS Class(es) to be added to field input (or similar)
-  copyValueTo: ["address.street"]     // Copy values to these schema keys.
+  copyValueTo: ["address.street"],     // Copy values to these schema keys.
+  condition: "person.age < 18" // Show or hide field depending on an angular expression
 }
 ```
 
@@ -461,7 +461,7 @@ See [Global Options](#global-options) for an example how you set entire form
 to validate on blur.
 
 ### copyValueTo
-This option has a very specific use case. Imagine you have the same option in several places, but you want them to be controlled from just one field. You specify what keys the value should be copied to, and the *viewValue* will be copied to these keys on the model. **Note: changing the model directly will not copy the value, it's intended for copying user input**. The recieving fields can be shown, but the intent for them is to be hidden. 
+This option has a very specific use case. Imagine you have the same option in several places, but you want them to be controlled from just one field. You specify what keys the value should be copied to, and the *viewValue* will be copied to these keys on the model. **Note: changing the model directly will not copy the value, it's intended for copying user input**. The recieving fields can be shown, but the intent for them is to be hidden.
 
 Ex.
 ```javascript
@@ -471,29 +471,12 @@ Ex.
 }
 ```
 
-Specific options and types
---------------------------
-
-### fieldset and section
+### condition
+The `condition` option lets you hide or show a field depending on an angular expression. Beneath
+the surface it uses `ng-if` so the hidden field is *not* part of the form.
 
-*fieldset* and *section* doesn't need a key. You can create generic groups with them.
-They do need a list of ```items``` to have as children.
-```javascript
-{
-  type: "fieldset",
-  items: [
-    "name",
-    { key: "surname", notitle: true }
-  ]
-}
-```
-
-### conditional
-
-A *conditional* is exactly the same as a *section*, i.e. a `<div>` with other form elements in
-it, hence they need an `items` property. They also need a `condition` which is
-a string with an angular expression. If that expression evaluates as thruthy the *conditional*
-will be rendered into the DOM otherwise not. The expression is evaluated in the parent scope of
+`condition` should be a string with an angular expression. If that expression evaluates as thruthy
+the field will be rendered into the DOM otherwise not. The expression is evaluated in the parent scope of
 the `sf-schema` directive (the same as onClick on buttons) but with access to the current model
 and current array index under the name `model` and `arrayIndex`. This is useful for hiding/showing
 parts of a form depending on another form control.
@@ -526,17 +509,14 @@ function FormCtrl($scope) {
     "name",
     "eligible",
     {
-        type: "conditional",
-        condition: "person.eligible", //or "model.eligable"
-        items: [
-          "code"
-        ]
+      key: "code",
+      condition: "person.eligible", //or "model.eligable"
     }
   ]
 }
 ```
-Note that angulars two-way binding automatically will update the conditional block, no need for
-event handlers and such. The condition need not reference a model value it could be anything in
+Note that angulars two-way binding automatically will update the conditional field, no need for
+event handlers and such. The condition need not reference a model value it could be anything on
 scope.
 
 The same example, but inside an array:
@@ -578,19 +558,37 @@ function FormCtrl($scope) {
         "persons[].name",
         "persons[].eligible",
         {
-          type: "conditional",
-          condition: "persons[arrayIndex].eligible", //or "model.eligable"
-          items: [
-            "persons[].code"
-          ]
+          key: "persons[].code",
+          condition: "persons[arrayIndex].eligible", //or "model[arrayIndex].eligable"
         }
       ]
     }
   ]
 }
 ```
 
-Note that arrays inside arrays won't work with conditional.
+Note that arrays inside arrays won't work with conditions.
+
+
+
+
+Specific options and types
+--------------------------
+
+### fieldset and section
+
+*fieldset* and *section* doesn't need a key. You can create generic groups with them.
+They do need a list of ```items``` to have as children.
+```javascript
+{
+  type: "fieldset",
+  items: [
+    "name",
+    { key: "surname", notitle: true }
+  ]
+}
+```
+
 
 ### select and checkboxes
 
@@ -1112,3 +1110,115 @@ $scope.form = [
   <!-- the rest of the form, i.e. name and comment will be generated here -->
 </form>
 ```
+
+
+
+Deprecated fields
+-----------------
+
+### conditional
+
+The *conditional* type is now deprecated since every form type now supports the form option
+`condition`.
+
+A *conditional* is exactly the same as a *section*, i.e. a `<div>` with other form elements in
+it, hence they need an `items` property. They also need a `condition` which is
+a string with an angular expression. If that expression evaluates as thruthy the *conditional*
+will be rendered into the DOM otherwise not. The expression is evaluated in the parent scope of
+the `sf-schema` directive (the same as onClick on buttons) but with access to the current model
+and current array index under the name `model` and `arrayIndex`. This is useful for hiding/showing
+parts of a form depending on another form control.
+
+ex. A checkbox that shows an input field for a code when checked
+
+```javascript
+function FormCtrl($scope) {
+  $scope.person = {}
+
+  $scope.schema = {
+    "type": "object",
+    "properties": {
+      "name": {
+        "type": "string",
+        "title": "Name"
+      },
+      "eligible": {
+        "type": "boolean",
+        "title": "Eligible for awesome things"
+      },
+      "code": {
+        "type":"string"
+        "title": "The Code"
+      }
+    }
+  }
+
+  $scope.form = [
+    "name",
+    "eligible",
+    {
+        type: "conditional",
+        condition: "person.eligible", //or "model.eligable"
+        items: [
+          "code"
+        ]
+    }
+  ]
+}
+```
+Note that angulars two-way binding automatically will update the conditional block, no need for
+event handlers and such. The condition need not reference a model value it could be anything in
+scope.
+
+The same example, but inside an array:
+
+```javascript
+function FormCtrl($scope) {
+  $scope.persons = []
+
+  $scope.schema = {
+    "type": "object",
+    "properties": {
+      "persons": {
+        "type": "array",
+        "items": {
+          "type": "object",
+          "properties": {
+            "name": {
+              "type": "string",
+              "title": "Name"
+            },
+            "eligible": {
+              "type": "boolean",
+              "title": "Eligible for awesome things"
+            },
+            "code": {
+              "type":"string"
+              "title": "The Code"
+            }
+          }
+        }
+      }
+    }
+  }
+
+  $scope.form = [
+    {
+      "key": "persons",
+      "items": [
+        "persons[].name",
+        "persons[].eligible",
+        {
+          type: "conditional",
+          condition: "persons[arrayIndex].eligible", //or "model.eligable"
+          items: [
+            "persons[].code"
+          ]
+        }
+      ]
+    }
+  ]
+}
+```
+
+Note that arrays inside arrays won't work with conditional.

examples/data/array.json

@@ -52,15 +52,10 @@
         "comments[].name",
         "comments[].email",
         {
-          "type": "conditional",
+          "key": "comments[].spam",
+          "type": "checkbox",
+          "title": "Yes I want spam.",
           "condition": "model.comments[arrayIndex].email",
-          "items": [
-            {
-              "key": "comments[].spam",
-              "type": "checkbox",
-              "title": "Yes I want spam."
-            }
-          ]
         },
         {
           "key": "comments[].comment",

src/directives/decorators/bootstrap/section.html

@@ -1,4 +1,3 @@
-<div class="schema-form-section {{form.htmlClass}}" 
-     ng-if="!form.condition || evalExpr(form.condition,{ model: model, 'arrayIndex': arrayIndex })">
+<div class="schema-form-section {{form.htmlClass}}">
   <sf-decorator ng-repeat="item in form.items" form="item"></sf-decorator>
 </div>

src/services/decorators.js

@@ -40,29 +40,6 @@ angular.module('schemaForm').provider('schemaFormDecorators',
           scope: true,
           require: '?^sfSchema',
           link: function(scope, element, attrs, sfSchema) {
-            //rebind our part of the form to the scope.
-            var once = scope.$watch(attrs.form, function(form) {
-
-              if (form) {
-                scope.form  = form;
-
-                //ok let's replace that template!
-                //We do this manually since we need to bind ng-model properly and also
-                //for fieldsets to recurse properly.
-                var url = templateUrl(name, form);
-                $http.get(url, {cache: $templateCache}).then(function(res) {
-                  var key = form.key ?
-                            sfPathProvider.stringify(form.key).replace(/"/g, '"') : '';
-                  var template = res.data.replace(
-                    /\$\$value\$\$/g,
-                    'model' + (key[0] !== '[' ? '.' : '') + key
-                  );
-                  element.html(template);
-                  $compile(element.contents())(scope);
-                });
-                once();
-              }
-            });
 
             //Keep error prone logic from the template
             scope.showTitle = function() {
@@ -158,8 +135,47 @@ angular.module('schemaForm').provider('schemaFormDecorators',
 
               //Otherwise we only have input number not being a number
               return 'Not a number';
-
             };
+
+            // Rebind our part of the form to the scope.
+            var once = scope.$watch(attrs.form, function(form) {
+              if (form) {
+                scope.form  = form;
+
+                //ok let's replace that template!
+                //We do this manually since we need to bind ng-model properly and also
+                //for fieldsets to recurse properly.
+                var url = templateUrl(name, form);
+                $http.get(url, {cache: $templateCache}).then(function(res) {
+                  var key = form.key ?
+                            sfPathProvider.stringify(form.key).replace(/"/g, '"') : '';
+                  var template = res.data.replace(
+                    /\$\$value\$\$/g,
+                    'model' + (key[0] !== '[' ? '.' : '') + key
+                  );
+                  element.html(template);
+
+                  // Do we have a condition? Then we slap on an ng-if on all children,
+                  // but be nice to existing ng-if.
+                  if (form.condition) {
+                    element.children().each(function() {
+                      var ngIf = this.getAttribute('ng-if');
+                      this.setAttribute(
+                        'ng-if',
+                        ngIf ?
+                        '(' + ngIf +
+                        ') || (evalExpr(form.condition,{ model: model, "arrayIndex": arrayIndex }))'
+                        : 'evalExpr(form.condition,{ model: model, "arrayIndex": arrayIndex })'
+                      );
+                    });
+                  }
+
+                  $compile(element.contents())(scope);
+                });
+
+                once();
+              }
+            });
           }
         };
       }