How to define *object keys* using AngularJS models?

I like to build a quick tool to define a "JSON-schema" which looks like this:

{
      "type": "object",
      "properties": {
          "myFirstProperty": {
              "type": "integer"
          }
      },
      "title": "MySchema",
      "description": "some description"
    }

See the preview here: http://jsfiddle.net/franquis/djRFN/4/embedded/result/

See the code here: http://jsfiddle.net/franquis/djRFN/4/

Using a simple form, I can define the "name", "description" using the "ng-model" attributes, but when it comes to the "properties" definition of my schema, I have some troubles :)

What I did is:

  1. First created a "$scope.newProperties" array, which store the properties I like to add to my schema "$scope.schema"
  2. Added a listener on this array in order to add new properties to my "$scope.schema.properties"

My issues:

When I created a new property, while I typing the name of the new key (ie hostname), it creates a lot of new properies... See below:

{
      "type": "object",
      "properties": {
         "h": {},
         "ho": {},
         "hos": {},
         "host": {},
         "hostn": {},
         "hostna": {},
         "hostnam": {},
         "hostname": {
            "type": "integer"
         }
      },
      "title": "MySchema",
      "description": "some description"
    }

I know this behavior is caused by the "$watch("myva",function(a,b){},true);" function, but what else can I try to succeed?

Thanks for your help!

Reset the $scope.schema.properties before iterating through the items:

$scope.$watch(function(){return $scope.newProperties;},function(items,b){
    $scope.newSchema.properties = {};
    angular.forEach(items, function(obj){
        if(angular.isDefined(obj.key)) {
            var key = obj.key, type = obj.type, name = obj.name;
            $scope.newSchema.properties[key] = {
                "name": name,
                "type": type
            };
        }
    });
},true);

It's the best way to keep the $scope.schema ordered and synced with the $scope.newProperties