Fixed examples to work with arrays

Author: Anthropic

README.md

@@ -8,20 +8,26 @@ Angular Schema Form
 [![Code Coverage](https://img.shields.io/coveralls/json-schema-form/angular-schema-form.svg?style=flat-square)](https://coveralls.io/github/json-schema-form/angular-schema-form?branch=development)
 
 
-
 Generate forms from JSON schemas using AngularJS!
 
-Branch Status
--------------
+Branch Status & New Add-On
+--------------------------
 This branch will be the **next version of Angular Schema Form**, currently please use
 the **examples/example.html** file as the best example to get the framework working.
 
-The example uses **schema-form.js** and **angular-schema-form-bootstrap.js** for the 
+The example uses **schema-form.js** and **angular-schema-form-bootstrap.js** for the
 version of the code it executes, if you want your page to behave the same you
 obviously need the same version!
 
-The new webpack compilation has made it easier to manage files and code and run build
-scripts, but it is still not easy enough for users unfamiliar with it yet.
+The new Webpack compilation has made it easier to manage files and code and run build
+scripts, but it is still not easy enough for users unfamiliar with it... yet.
+
+### Add-on
+To see how to make an **add-on** work I have now included the **calculate** add-on file within the **examples/add-on** directory.
+
+## Yet to be migrated
+Currently **copyValueTo** and some **array** related features are not working as expected and remain the highest priority to ensure backwards compatibility is maintained where possible.
+
 
 The Blog / The Web Site / The Twitter / The Movie
 ------------------------------------------------

dist/schema-form.js

@@ -3431,7 +3431,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	exports.default = function (schemaForm, sfPath) {
 	  return {
 	    scope: true,
-	    require: ['^^sfNewArray'],
+	    require: ['?^^sfNewArray'],
 	    controller: ['$scope', function SFKeyController($scope) {
 	      this.key = $scope.form && $scope.form.key ? $scope.form.key.splice(0, -2) : [];
 	    }],

dist/schema-form.min.js

@@ -2,6 +2,10 @@
  * I calculate a field value based on a provided mathematical string
  *
  * @homepage https://github.com/Anthropic/angular-schema-form-calculate
+ *
+ * NOTE: This version is not in sync with the source repo as it has
+ * been modified to work with the new version of the framework in development
+ * 
  * @example
  * {
  *   "type":"calculate",
@@ -24,22 +28,18 @@ angular
         link: {
           post: function(scope, element, attrs, ctrl) {
             var watchKeys = scope.form.watch,
-                key,
+                key, keyFixed, exec,
                 i;
 
             scope.form.format = scope.form.format || 'number';
 
             for (i=0; i < watchKeys.length; i++) {
-              key = watchKeys[i];
+              key = watchKeys[i].split('[]');
+              keyFixed = key.reduce(function(pv, cv, ci, ta){
+                return '' + pv + ((cv[0]=='.')? '['+scope.$i[ci-1]+']'+cv: cv);
+              });
 
-              scope.$watch(function() {
-                return $interpolate('{{' + key + '}}', false, null, true)({
-                  model: scope.model,
-                  $i: scope.$i,
-                  $index: scope.$index,
-                  path: scope.path
-                });
-              },
+              scope.$watch(keyFixed,
               function (val, old) {
                 var newValue = $interpolate('{{' + scope.form.calculate + '}}', false, null, true)({
                   model: scope.model,

examples/add-on/calculate.js

@@ -51,13 +51,14 @@
     {
       "key": "area",
       "type": "calculate",
-      "watch": [ "property[0].width", "property[0].length" ],
-      "calculate": "model.property[0].width * model.property[0].length"
+      "watch": [ "model.width", "model.length" ],
+      "calculate": "model.width * model.length"
     },
     "width",
     "length",
     "area",
     {
+      "title": "{{ value.name || 'Tab ' + $index }}",
       "key": "property",
   	  "type": "tabarray",
   	  "add": "New",
@@ -68,7 +69,13 @@
         "property[].name",
         "property[].width",
         "property[].length",
-        "property[].area"
+        "property[].area",
+        {
+          "key": "property[].area",
+          "type": "calculate",
+          "watch": [ "model.property[].width", "model.property[].length" ],
+          "calculate": "model.property[$i[0]].width * model.property[$i[0]].length"
+        }
       ]
     },
     {

examples/data/calculate.json

@@ -17,23 +17,6 @@
         "enum": ["a","b","c"]
       },
       "noenum": { "type": "string", "title": "No enum, but forms says it's a select", "default": "a3" },
-      "selectOptionData": {
-        "type": "string",
-        "title": "Dynamic Options",
-        "default": "The Terminator"
-      },
-      "radios": {
-        "title": "Basic radio button example to pick remote dataset for below select 'Remote Options'",
-        "type": "string",
-        "enum": ["books","movies"]
-      },
-      "selectOptionRemote": {
-        "type": "string",
-        "title": "Remote Options",
-        "links":[
-          { "rel": "options", "href": "./data/remote-titlemap-{radios}.json" }
-        ]
-      },
       "array": {
         "title": "Array with enum defaults to 'checkboxes'",
         "type": "array",

examples/data/titlemaps.json

@@ -142,7 +142,7 @@ <h1>Schema Form Example</h1>
     <div class="col-sm-4">
       <h3>The Generated Form</h3>
 
-      <form name="ngform"  sf-model="modelData" sf-form="form" sf-schema="schema" ng-submit="submitForm(ngform,modelData)" sf-options="{ formDefaults: { ngModelOptions: { updateOn: 'blur' } }}"></form>
+      <form name="ngform"  sf-model="modelData" sf-form="form" sf-schema="schema" ng-submit="submitForm(ngform,modelData)" sf-options="{ formDefaults: { ngModelOptions: { timezone: '+0430' } }}"></form>
 <!--
       <form name="ngform"
             sf-model="modelData"
@@ -236,17 +236,17 @@ <h3>Schema</h3>
 app.controller('TestCtrl', function($scope, $http, $location) {
 
   $scope.tests = [
-    { name: "Array Radio-Buttons", data: 'data/array-radiobuttons.json' },
-    { name: "Calculate", data: 'data/calculate.json' },
-    { name: "Deep Array", data: 'data/deep-array.json' },
     { name: "Simple", data: 'data/simple.json' },
     { name: "Basic JSON Schema Type", data: 'data/types.json' },
     { name: "Bootstrap Grid", data: 'data/grid.json' },
     { name: "Complex Key Support", data: 'data/complex-keys.json' },
     { name: "Array", data: 'data/array.json' },
     { name: "Tab Array", data: 'data/tabarray.json' },
+    { name: "Deep Array", data: 'data/deep-array.json' },
+    //{ name: "Array Radio-Buttons", data: 'data/array-radiobuttons.json' },
     { name: "TitleMap Examples", data: 'data/titlemaps.json' },
     { name: "Kitchen Sink", data: 'data/sink.json' },
+    { name: "Calculate", data: 'data/calculate.json' },
     { name: "Hack: Conditional required", data: 'data/conditional-required.json' }
   ];
 

examples/example.html

@@ -4,7 +4,7 @@
 export default function(schemaForm, sfPath) {
   return {
     scope: true,
-    require: ['^^sfNewArray'],
+    require: ['?^^sfNewArray'],
     controller: ['$scope', function SFKeyController($scope) {
       this.key = ($scope.form && $scope.form.key) ? $scope.form.key.splice(0, -2) : [];
     }],