Two way binding for checkboxes

fixes #25, fixes #30

Author: davidlgj

examples/data/titlemaps.json

@@ -1,4 +1,8 @@
 {
+  "model": {
+    "select": "a",
+    "array": ["b"]
+  },
   "schema": {
     "type": "object",
     "properties": {
@@ -24,6 +28,7 @@
       "array2": {
         "title": "Array with titleMap",
         "type": "array",
+        "default": ["b","c"],
         "items": {
           "type": "string",
           "enum": ["a","b","c"]

src/directives/array.js

@@ -36,13 +36,17 @@ function(sfSelect, schemaForm) {
         }
         scope.modelArray = list;
 
-        // To be more compatible with JSON Form we support an array of items
-        // in the form definition of "array" (the schema just a value).
-        // for the subforms code to work this means we wrap everything in a
-        // section. Unless there is just one.
-        var subForm = form.items[0];
-        if (form.items.length > 1) {
-          subForm = { type: 'section', items: form.items };
+        // Arrays with titleMaps, i.e. checkboxes doesn't have items.
+        if (form.items) {
+
+          // To be more compatible with JSON Form we support an array of items
+          // in the form definition of "array" (the schema just a value).
+          // for the subforms code to work this means we wrap everything in a
+          // section. Unless there is just one.
+          var subForm = form.items[0];
+          if (form.items.length > 1) {
+            subForm = { type: 'section', items: form.items };
+          }
         }
 
         // We ceate copies of the form on demand, caching them for
@@ -88,10 +92,60 @@ function(sfSelect, schemaForm) {
         };
 
         // Always start with one empty form unless configured otherwise.
-        if (form.startEmpty !== true && list.length === 0) {
+        // Special case: don't do it if form has a titleMap
+        if (!form.titleMap && form.startEmpty !== true && list.length === 0) {
           scope.appendToArray();
         }
 
+        // Title Map handling
+        // If form has a titleMap configured we'd like to enable looping over
+        // titleMap instead of modelArray, this is used for intance in
+        // checkboxes. So instead of variable number of things we like to create
+        // a array value from a subset of values in the titleMap.
+        // The problem here is that ng-model on a checkbox doesn't really map to
+        // a list of values. This is here to fix that.
+        if (form.titleMap && form.titleMap.length > 0) {
+          scope.titleMapValues = [];
+
+
+
+
+          // We watch the model for changes and the titleMapValues to reflect
+          // the modelArray
+          var updateTitleMapValues = function(arr) {
+            scope.titleMapValues = [];
+            arr = arr || [];
+
+            form.titleMap.forEach(function(item) {
+              scope.titleMapValues.push( arr.indexOf(item.value) !== -1 );
+            });
+
+          };
+          //Catch default values
+          updateTitleMapValues(scope.modelArray);
+          scope.$watchCollection('modelArray',updateTitleMapValues);
+
+          //To get two way binding we also watch our titleMapValues
+          scope.$watchCollection('titleMapValues', function(vals) {
+            if (vals) {
+              var arr = scope.modelArray;
+
+              // Apparently the fastest way to clear an array, readable too.
+              // http://jsperf.com/array-destroy/32
+              while (arr.length > 0) {
+                arr.shift();
+              }
+
+              form.titleMap.forEach(function(item,index) {
+                if (vals[index]) {
+                  arr.push(item.value);
+                }
+              });
+
+            }
+          });
+        }
+
         once();
       });
     }

src/directives/decorators/bootstrap/checkboxes.html

@@ -1,12 +1,11 @@
-<div class="form-group" ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}" ng-init="checkboxValues = listToCheckboxValues($$value$$)">
+<div sf-array="form" class="form-group" ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
   <label ng-show="showTitle()">{{form.title}}</label>
-  <div class="checkbox" ng-repeat="item in form.titleMap" >
+  <div class="checkbox" ng-repeat="val in titleMapValues track by $index" >
     <label>
       <input type="checkbox"
              sf-changed="form"
-             ng-model="checkboxValues[item.value]"
-             ng-change="$$value$$ = checkboxValuesToList(checkboxValues)" >
-      <span ng-bind-html="item.name"></span>
+             ng-model="titleMapValues[$index]">
+      <span ng-bind-html="form.titleMap[$index].name"></span>
     </label>
 
   </div>