XML Creator

Creating XML like structure...

by ganarajpr

HTML

<script src="http://code.angularjs.org/1.0.0rc8/angular-1.0.0rc8.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script type="text/ng-template"  id="tree_item_renderer.html">

    <form class="form-inline">
        {{data.name}}
        <span ng-repeat="attr in data.attributes"> {{attr.nodeName}}="{{attr.nodeValue}}"</span>
        <input ng-model="data.nodeName" type="text" class="input-medium search-query">
        <button class="btn" ng-click="add(data)">Add node</button>
        <button class="btn btn-danger" ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>
        <input ng-model="data.attribName" type="text" class="input-medium search-query">
        <input ng-model="data.attribValue" type="text" class="input-medium search-query">
        <button ng-click="addAttribute(data)" class="btn">Add</button>
    </form>
    <ul>
        <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
    </ul>
</script>
<ul ng-controller="TreeController"><li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li></ul>

JavaScript

angular.module('Model', [])
    .factory('XMLModel', function () {
        return [{
            name: "",
            nodes: [],
            attributes:[],
            addAttributes:function(name,value)
            {
                this.attributes.push({nodeName:name,nodeValue:value});
            },
            addNode:function(name)
            {
                this.nodes.push({name: name,nodes: [],attributes:[]});
            },
            deleteNode:function()
            {
                this.nodes = [];
            }
        }];
    });
function TreeController($scope,XMLModel)
{

    $scope.delete = function(data) {
        data.nodes = [];
        //data.deleteNode();
    };
    $scope.add = function(data) {
        //var post = data.nodes.length + 1;
        //var newName = data.name + '-' + post;
        var newName = data.nodeName;
        data.nodes.push({name: newName,nodes: [],attributes:[]});
    };
    $scope.addAttribute = function(data) {
        var nodeName = data.attribName;
        var v = data.attribValue;
        data.attributes.push({nodeName: nodeName,nodeValue: v});
    };
    $scope.tree = XMLModel;
    $scope.tree[0].name = "root";
    //$scope.tree = [{name: "StruqBannerRotator", nodes: [],attributes:[]}];
}