Merge branch 'array-model-watch' of https://github.com/Sandreu/angular-schema-form into Sandreu-array-model-watch

Author: davidlgj

src/directives/array.js

@@ -1,8 +1,8 @@
 /**
  * Directive that handles the model arrays
  */
-angular.module('schemaForm').directive('sfArray', ['sfSelect', 'schemaForm', 'sfValidator',
-  function(sfSelect, schemaForm, sfValidator) {
+angular.module('schemaForm').directive('sfArray', ['sfSelect', 'schemaForm', 'sfValidator', 'sfPath',
+  function(sfSelect, schemaForm, sfValidator, sfPath) {
 
     var setIndex = function(index) {
       return function(form) {
@@ -18,17 +18,25 @@ angular.module('schemaForm').directive('sfArray', ['sfSelect', 'schemaForm', 'sf
       require: '?ngModel',
       link: function(scope, element, attrs, ngModel) {
         var formDefCache = {};
-
+        var arr_change_watcher = false;
+        
         // Watch for the form definition and then rewrite it.
         // It's the (first) array part of the key, '[]' that needs a number
         // corresponding to an index of the form.
         var once = scope.$watch(attrs.sfArray, function(form) {
-
+          
           // An array model always needs a key so we know what part of the model
           // to look at. This makes us a bit incompatible with JSON Form, on the
           // other hand it enables two way binding.
           var list = sfSelect(form.key, scope.model);
-
+          
+          // Stop a previous watcher
+          if (arr_change_watcher) arr_change_watcher();
+          arr_change_watcher = scope.$watch('model' + sfPath.normalize(form.key), function (val) {
+            list = sfSelect(form.key, scope.model);
+            scope.modelArray = list;
+          });
+          
           // Since ng-model happily creates objects in a deep path when setting a
           // a value but not arrays we need to create the array.
           if (angular.isUndefined(list)) {

test/directives/schema-form-test.js

@@ -1619,5 +1619,78 @@ describe('directive',function(){
       tmpl.children().eq(0).find('select').eq(0).find('option').eq(2).text().trim().should.be.eq('The A');
     });
   });
+  
+  
+  it('should update array form on model array ref change',function(){
+
+    inject(function($compile,$rootScope){
+      var scope = $rootScope.$new();
+      scope.person = {
+        names:[
+          {
+            firstname: 'Bill',
+            lastname: 'Murray'
+          },{
+            firstname: 'Ghost',
+            lastname: 'Buster'
+          }
+        ]
+      };
+
+      scope.schema = {
+        "type": "object",
+        "properties": {
+          "names": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "title": "subform",
+              "properties": {
+                "firstname": {
+                  "type": "string"
+                },
+                "lastname": {
+                  "type": "string"
+                }
+              }
+            }
+          }
+        }
+      };
+
+      scope.form = ["*"];
+
+      var tmpl = angular.element('<form sf-schema="schema" sf-form="form" sf-model="person"></form>');
+
+      $compile(tmpl)(scope);
+      $rootScope.$apply();
+
+      tmpl.children().eq(0).find('ol').children().length.should.be.eq(2);
+      
+      var new_names = [
+          {
+            firstname: 'Bill',
+            lastname: 'Murray'
+          },
+          {
+            firstname: 'Harold',
+            lastname: 'Ramis'
+          },{
+            firstname: 'Dan',
+            lastname: 'Aykroyd'
+          },{
+            firstname: 'Ghost',
+            lastname: 'Buster'
+          }
+        ];
+        
+      scope.person.names = new_names;
+      
+      $rootScope.$apply();
+      
+      tmpl.children().eq(0).find('ol').children().length.should.be.eq(4);
+    });
+  });
+
 
 });