A Pen by Maruf Maniruzzaman.

atCcI.markdown

atCcI

A Pen by Maruf Maniruzzaman on CodePen.

License.

index.html

<!-- http://cosmosframework.com -->

<div ng-app="cosmosApp">
  <form ng-controller="FormViewCtrl">
    <field item="form"></field>    
  </form>
</div>

script.js

var phonecatApp = angular.module('cosmosApp', []);

phonecatApp.controller('FormViewCtrl', function ($scope) {
  $scope.form ={'name':'form', 'type':'composite', 
        'fields': [    
            {'name': 'name','type': 'text'},
            {'name':'address', 'type':'composite',
               'fields':[
                   {'name': 'street','type': 'text'},
                   {'name': 'city','type': 'text'},
                   {'name': 'zip','type': 'text'},
                   {'name': 'state','type': 'text'},
                   {'name':'members', 'type':'array',
                       'fields':[
                            {'name': 'name','type': 'text'}
                        ]
                   }
               ]          
            },
            {'name':'assets', 'type':'array',
                'fields':[
                    {'name': 'type','type': 'text'},
                    {'name': 'price','type': 'text'},
                    {'name': 'brand','type': 'composite', 
                        'fields':[
                            {'name': 'name','type': 'text'},
                            {'name':'locations', 'type':'array',
                                'fields':[
                                    {'name': 'city','type': 'text'}
                                 ]
                            }
                        ]
                    }       
                ]          
            }       
        ]
    }; 
});

phonecatApp.directive('field', function($compile) {
    return {
      restrict: 'E',
      scope: {
        item:'='        
      },
      
      link: function(scope, element, attributes) {
        scope.item_data = [];
        scope.add_item = function(position){
          var newItem = {};
          angular.forEach(scope.item.fields, function(value, index){
            newItem[value.name] = "test";
          });
          scope.item_data.splice(position+1, 0, newItem);
                          
        };
        scope.removeItem = function(index){
          scope.item_data.splice(index, 1);
        };
        var template = '<span>{{item.name}}<input type="text" /></span> &nbsp;'; 
        
        if(scope.item.type === "composite"){
          template = '<div>{{item.name}}</div><ul><li ng-repeat="ph in item.fields"><field item="ph"></field></li></ul>';
        }
        else if(scope.item.type === "array"){
          if(scope.item_data.length<1){
            scope.item_data = [];
            scope.add_item();
          }
          template = '<div>{{item.name}}<button ng-click="add_item(-1)">+</button></div><ul><li ng-repeat="d in item_data"><field item="ph" ng-repeat="ph in item.fields"></field><button ng-click="removeItem($index)">-</button><button ng-click="add_item($index)">+</button></li></ul>';
        }
        
        var newElement = angular.element(template);
        $compile(newElement)(scope);
        element.replaceWith(newElement);        
      }
    };
  });