Angular: File2GUI_Add_More_Buttons

http://angularjs.org/

by rishi007bansod

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc8.js"></script>
<script type="text/ng-template" id="tree_item_renderer.html">
  {{data.name}},{{data.functionToApply}}
  <button ng-click="add(data)">Add node</button>
  <button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>

  <select ng-model="data.functionToApply" 
  data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates"
  ng-init="blisterPackTemplates[0]">
    <option value="">Select Account</option>
</select>


  <ul>
    <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
  </ul>
</script>

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<ul ng-app="Application" ng-controller="TreeController">

  <li ng-repeat="data in tree" ng-model="json" 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) {
  $scope.delete = function(data) {
    data.nodes = [];
  };
  $scope.add = function(data) {
    var post = data.nodes.length + 1;
    var newName = data.name + '-' + post;
    data.nodes.push({
      name: newName,
      functionToApply: "Default",
      nodes: []
    });
  };


  $scope.tree = [{
    name: "UserID-1",
    functionToApply: "",
    nodes: []
  }];

	

  // function ctrl($scope){
  //$scope.itemList=[];
  $scope.blisterPackTemplates = [{
    id: 1,
    name: "Default"
  }, {
    id: 2,
    name: "Function-1"
  }, {
    id: 3,
    name: "Function-2"
  }, {
    id: 4,
    name: "Function-3"
  }]

  

  var json;




  function flatObject(obj, myTree) {
    console.log('==========tree length is: ' + myTree.length)
    var count = 0;
    Object.keys(obj).forEach(y => {
      console.log('key: ' + y)

      if (obj[y] instanceof Object) {
        //for(var j = 0; j < myTree.length; j++) 
        {
          console.log('printing key: ' + y + ", value :" + obj[y])
          myTree.nodes.push({
            name: y,
            nodes: []
          });
          console.log('tree length: ' + myTree.length)
          flatObject(obj[y], myTree.nodes[count]);

        }
      } else {
        //for(var j = 0; j < myTree.length; j++) 
        {
          console.log('....printing key: ' + y + ", value :" + obj[y])
          myTree.nodes.push({
            name: y,
            nodes: [{
              name: obj[y],
              nodes: []
            }]
          });
          console.log('value: ' + obj[y])
          console.log('tree length: ' + myTree.length)
        }
      }
      count++;
    });
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);

  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for...