Angular+JQ+Bootstrap

by Saulzar

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0rc8/angular-1.0.0rc8.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<div ng-controller="MyCtrl">
    <form>
        <h6>This is my form!</h6>
        <form-struct data="formData"></form-struct>
    </form>
    <hr />
    {{formData}}
    <hr />
    <button ng-click="formData.fields.push({name:'extra',type:'string',value:'hello'})">Add New</button>
    <button ng-click="nest()">Add Nest</button>
    
</div>

CSS

.fields 
{
  padding-left: 10px;   
}

.delete 
{
    float: right;
}

JavaScript

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

function MyCtrl($scope) {
    $scope.formData = {
        title : "Form Test",
        fields : [{
                name : "FieldA",
                type : "string",
                value : "initial value, change me!"
            }, {
                name : "FieldB",
                type : "selection",
                options : ["1", "2", "3"],
                value : "2"
            }, {
                name : "FieldC",
                type : "struct",
                value :
                [{
                        name : "FieldC1",
                        type : "string",
                        value : "initial value"
                    }, {
                        name : "FieldC2",
                        type : "string",
                        value : "initial value"
                    },
                ]
            }
        ]
    };
    
    $scope.nest = function()
    {
        var fields = $scope.formData.fields;
        $scope.formData.fields = 
      
            [ {name: 'top', type:'struct', value: [fields]},
              {name:'extra',type:'string',value:'hello'}
             ]
        
    }
}

myApp.directive('formStruct', function($compile) {
    return {
        restrict: 'E',
        scope:{ data: 'accessor' },
        link: function(scope, elm, attrs) {
            scope.delete = function(item)
            {  
               var d = scope.data();
               d.fields = _.reject(d.fields, function(name) { return item.name === name; }            
            }    
        

            elm.append($compile(
            '<b>Struct {{data().name || data().title}}</b>'+
            '<div class="fields" ng-repeat="field in data().value || data().fields">'+
                '<span ng-switch on="field.type">'+
                '<div ng-switch-when="string">'+
                    '{{field.name}}: <input ng-model="field.value" />'+
                '</div>'+
                '<div...