Angular: Empty Fiddle

http://angularjs.org/

by KevinIsNowOnline

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc8.js"></script>
<script type="text/ng-template"  id="tree_item_renderer.html">
    {{data.conditionalOperator}}
    <input type="text" ng-model="data.field1">
    {{data.operator}}
    <input type="text" ng-model="data.valueType">
    
    <input type="text" ng-model="data.actualValue">
        
    <button ng-click="add(data)">Add node</button>
    <button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>
    <ul>
        <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
    </ul>
        <div ng-if="data.set.mandatory == false">
           Mandatory: {{data.set.mandatory}}
        <button ng-click="addBlock(data)">Add Block</button>
        <button ng-click="deleteBlock($index)">Delete Block</button>
        </div>
</script>

<ul ng-app="Application" ng-controller="TreeController">
    <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
 
</ul>

CSS

ul {
    list-style: circle;
}
li {
    margin-left: 20px;
}

JavaScript

angular.module("myApp", []).
controller("TreeController", ['$scope', function ($scope) {
    var _defaultBlockObject = {
        conditionalOperator: "IF",
        field1: 'blank',
        valueType: 'value of field',
        actualValue: 'sample field value',
        operator: '!=',
        nodes: [

        ],
        set: {
            mandatory: 'true'
        }
    }

    $scope.delete = function (data) {
        data.nodes = [];
    };

    $scope.deleteBlock = function (index) {
        //dont splice if first block
        //as nothing will remain on the page if all are deleted
        if (index > 0) {
            $scope.tree.splice(index, 1);
        }

    };

    $scope.addBlock = function () {
        console.log($scope);
        //append new prototyped object to tree
        debugger
        $scope.tree.push({
            conditionalOperator: "IF",
            field1: 'blank',
            valueType: 'blank',
            actualValue: 'blank',
            operator: '=',
            nodes: [

            ],
            set: {
                mandatory: 'true'
            }
        });

    };

    $scope.add = function (data) {

        var post = data.nodes.length + 1;
        var newName = data.name + '-' + post;
        data.nodes.push({
            name: newName,
            nodes: []
        });

    };

    $scope.tree = [{
        conditionalOperator: "IF",
        field1: 'AAAA',
        valueType: 'value of field',
        actualValue: 'sample field value',
        operator: '!=',
        nodes: [

        ],
        set: {
            mandatory: 'true'
        }
    },
                  {
        conditionalOperator: "IF",
        field1: 'AAAA',
        valueType: 'value of field',
        actualValue: 'sample field value',
        operator: '!=',
        nodes: [

        ],
        set: {
            mandatory: 'false'
        }
    }];
}]);