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}},{{data.sel_option}}
  <button ng-click="Optionthis(data)">Option-this</button>
  <button ng-click="Option0(data)">Option-0</button>
  <button ng-click="Option1(data)">Option-1</button>

  <select ng-model="data.functionToApply" 
  data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates"
  ng-init="data.functionToApply = blisterPackTemplates[0]"
  ng-show="data.nodes.length > 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.Option0 = function(data) {
    data.sel_option = "0";
  };
  $scope.Option1 = function(data) {
    data.sel_option = "1";
  };
	$scope.Optionthis = function(data) {
    data.sel_option = "this";
  };

  $scope.tree = [{
    name: "UserID-1",
    functionToApply: "",
    sel_option: "this",
    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,
            functionToApply: $scope.blisterPackTemplates[0],
            sel_option: "this",
            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,
            functionToApply: $scope.blisterPackTemplates[0],
            sel_option: "this",
            nodes: [{
              name: obj[y],
              functionToApply: $scope.blisterPackTemplates[0],
              sel_option: "this",
              nodes: []
            }]
          });
          console.log('value: ' + obj[y])
          console.log('tree length: ' + myTree.length)
        }
      }
      count++;
    });
  }

 ...