New type "conditional"

Same as section (uses same template actually), but with an ng-if
attached to it so it can be rendered or not depending on an expression.

Author: davidlgj

README.md

@@ -61,6 +61,7 @@ Schema Form currently supports the following form field types:
 |:--------------|:------------------------|
 | 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             |
@@ -214,6 +215,56 @@ They do need a list of ```items``` to have as children.
 }
 ```
 
+A *conditional* is exactly the same as a *section*, i.e. a ```<div>``` with other form elements in
+it, hence they *section* needs 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). 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",
+        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.
+
+
+
 
 *select* and *checkboxes* can take an object, ```titleMap```, where key is the value to be saved on the model
 and the value is the title of the option.

src/bootstrap-example.html

@@ -117,12 +117,28 @@ <h3>Schema</h3>
         "description": "I agree to sell my undying soul",
         "type": "boolean",
         "default": true,
+      },
+      "soulserial": {
+        "title": "Soul Serial No",
+        "type": "string"
       }
     }
   };
 
   $scope.form = [
-    '*',
+    "name",
+    { key: "favorite"},
+    "attributes",
+    "shoesize",
+    "things",
+    "soul",
+    {
+      type: "conditional",
+      condition: "person.soul",
+      items: [
+        { key: "soulserial", placeholder: "ex. 666" }
+      ]
+    },
     {
       type: 'actions',
       items: [
@@ -168,7 +184,7 @@ <h3>Schema</h3>
 
 
   $scope.sayNo = function() {
-    alert('Noooooooo')
+    alert('Noooooooo');
   }
 
 }

src/directives/decorators/bootstrap/bootstrap-decorator.js

@@ -5,6 +5,7 @@ angular.module('schemaForm').config(['schemaFormDecoratorsProvider',function(dec
     textarea: base+'textarea.html',
     fieldset: base+'fieldset.html',
     section: base+'section.html',
+    conditional: base+'section.html',
     actions: base+'actions.html',
     select: base+'select.html',
     checkbox: base+'checkbox.html',

src/directives/decorators/bootstrap/section.html

@@ -1,3 +1,3 @@
-<div>
-  <bootstrap-decorator ng-repeat="item in form.items" form="item"></bootstrap-decorator>
+<div ng-if="!form.condition || evalExpr(form.condition)">
+  <sf-decorator ng-repeat="item in form.items" form="item"></sf-decorator>
 </div>

src/directives/schema-form.js

@@ -34,7 +34,7 @@ function($compile,  schemaForm,  schemaFormDecorators){
     },
     controller: ['$scope',function($scope){
       this.evalInParentScope = function(expr,locals){
-        $scope.$parent.$eval(expr,locals);
+        return $scope.$parent.$eval(expr,locals);
       };
     }],
     replace: false,

src/services/decorators.js

@@ -88,6 +88,22 @@ angular.module('schemaForm').provider('schemaFormDecorators',['$compileProvider'
               }
             };
 
+            /**
+             * Evaluate an expression, i.e. scope.$eval
+             * but do it in sfSchemas parent scope sf-schema directive is used
+             * @param {string} expression
+             * @param {Object} locals (optional)
+             * @return {Any} the result of the expression
+             */
+            scope.evalExpr = function(expression,locals) {
+              if (sfSchema) {
+                //evaluating in scope outside of sfSchemas isolated scope
+                return sfSchema.evalInParentScope(expression,locals);
+              }
+
+              return scope.$eval(expression,locals);
+            };
+
             /**
              * Error message handler
              * An error can either be a schema validation message or a angular js validtion

test/schema-form-test.js

@@ -680,6 +680,53 @@ describe('Schema form',function(){
       });
     });
 
+    it('should handle a simple div with a condition if "conditional" is specified',function(done){
+
+      inject(function($compile,$rootScope){
+        var scope = $rootScope.$new();
+        scope.person = { show: false };
+
+        scope.schema = exampleSchema;
+
+        scope.form = [{
+          type: "conditional",
+          condition: "person.show",
+          items: [
+            {
+              key: 'name',
+              notitle: true
+            },
+            {
+              key: 'gender',
+              notitle: true
+            }
+          ]
+        }];
+
+        var tmpl = angular.element('<form sf-schema="schema" sf-form="form" sf-model="person"></form>');
+
+        $compile(tmpl)(scope);
+        $rootScope.$apply();
+
+        tmpl.children().length.should.be.equal(0);
+
+        //Do a setTimeout so we kan do another $apply
+        setTimeout(function(){
+          scope.person.show = true;
+          scope.$apply();
+          tmpl.children().length.should.be.equal(1);
+          tmpl.children().eq(0).is('div').should.be.true;
+          tmpl.children().eq(0).hasClass('btn-group').should.be.false;
+          tmpl.children().eq(0).children().length.should.be.eq(2);
+          done();
+        },10);
+
+      });
+    });
+
+
+
+
     it('should handle "action" groups, same as "section" but with a bootstrap class "btn-group"',function(){
 
       inject(function($compile,$rootScope){