Expose array index to conditionals.

Makes conditionals work inside an array. Fixes #35

Author: davidlgj

docs/index.md

@@ -427,12 +427,12 @@ They do need a list of ```items``` to have as children.
 
 ### 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 *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
-under the name ```model```. This is useful for hiding/showing
+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
@@ -476,6 +476,58 @@ Note that angulars two-way binding automatically will update the conditional blo
 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.
 
 ### select and checkboxes
 

examples/data/array.json

@@ -20,14 +20,19 @@
               "pattern": "^\\S+@\\S+$",
               "description": "Email will be used for evil."
             },
+            "spam": {
+              "title": "Spam",
+              "type": "boolean",
+              "default": true
+            },
             "comment": {
               "title": "Comment",
               "type": "string",
               "maxLength": 20,
               "validationMessage": "Don't be greedy!"
             }
           },
-          "required": ["name","email","comment"]
+          "required": ["name","comment"]
         }
       }
     }
@@ -39,13 +44,24 @@
     },
     {
       "key": "comments",
-	  "add": "New",
-	  "style": {
-		"add": "btn-success"
+  	  "add": "New",
+  	  "style": {
+  		"add": "btn-success"
 	  },
       "items": [
         "comments[].name",
         "comments[].email",
+        {
+          "type": "conditional",
+          "condition": "model.comments[arrayIndex].email",
+          "items": [
+            {
+              "key": "comments[].spam",
+              "type": "checkbox",
+              "title": "Yes I want spam."
+            }
+          ]
+        },
         {
           "key": "comments[].comment",
           "type": "textarea"

src/directives/decorators/bootstrap/array.html

@@ -7,7 +7,7 @@ <h3 ng-show="form.title && form.notitle !== true">{{ form.title }}</h3>
               type="button" class="close pull-right">
               <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
       </button>
-      <sf-decorator form="copyWithIndex($index)"></sf-decorator>
+      <sf-decorator ng-init="arrayIndex = $index" form="copyWithIndex($index)"></sf-decorator>
     </li>
   </ol>
   <div class="clearfix" style="padding: 15px;">

src/directives/decorators/bootstrap/section.html

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