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">
	<div ng-show="!(data.name=='UserDictionaryRecord')">
  <p>{{data.name}},{{data.functionToApply}},{{data.sel_option}},{{data.dummy}}</p>
  </div>
  
	<select ng-model="data.sel_option" 
  data-ng-options="optionTemplate as optionTemplate.name for optionTemplate in optionTemplates"
  ng-init="data.sel_option = optionTemplates[0]"
  ng-show="!(data.name=='UserDictionaryRecord')"
  >
    
</select>


  <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.name=='UserDictionaryRecord')"
  >
    
</select>

<div ng-show="!(data.name=='UserDictionaryRecord')">
	 Dummy: <input type="text" ng-show="!(data.name=='UserDictionaryRecord')" ng-model="data.dummy" value="" />
       


  <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.tree = [{
    name: "UserDictionaryRecord",
    functionToApply: "",
    sel_option: "",
    dummy: "",
    nodes: []
  }];

	

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


$scope.optionTemplates = [ {
    id: 1,
    name: "Select Option"
  },
	{
    id: 2,
    name: "this"
  }, {
    id: 3,
    name: "0"
  }, {
    id: 4,
    name: "1"
  }]
  

  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: $scope.optionTemplates[0],
            dummy: "",
            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: $scope.optionTemplates[0],
            dummy: "",
            nodes: [{
              name: obj[y],
              functionToApply: $scope.blisterPackTemplates[0],
              sel_option: $scope.optionTemplates[0],
              dummy: "",
              nodes: []
            }]
          });
          console.log('value: ' + obj[y])
         ...