Angular: File2GUI_Add_More_Buttons

http://angularjs.org/

by rishi007bansod

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc8.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/ng-template" id="tree_item_renderer.html"> 
  <!-- Change Background color once option is selected 
  ng-show="!(data.name=='UserDictionaryRecord')"-->
	<div ng-show="!(data.name=='UserDictionaryRecord')">
  
  
  <div ng-show="!(data.name=='UserDictionaryRecord')" ng-style="(!(data.sel_option === optionTemplates[0]) && !(data.functionToApply === blisterPackTemplates[0])&&!(data.dummy === ''))&&{'background-color': '#3BB9FF'}">
  
  <button data-toggle="collapse" class="buttonexpcollps buttoncollapse" ng-show="data.nodes.length > 0" data-target="#{{data.uniqueId}}">+</button>
  <button id="toggleMessage" data-toggle="collapse" data-target="#{{data.uniqueId}}" class="button buttonitem" ng-click="data.toggle=!data.toggle; changeOtherToggles(data.uniqueId)">
   {{data.name}}
  </button>
  <!--,{{data.showOptions}},{{data.functionToApply}},{{data.sel_option}},{{data.dummy}}-->
  
  
  
  
	<select ng-model="data.sel_option" 
  ng-change="updateDisplay()"
  data-ng-options="optionTemplate as optionTemplate.name for optionTemplate in optionTemplates"
  ng-init="data.sel_option = optionTemplates[0]"
  ng-show="(data.showOptions=='true') && data.toggle"
  >
    
</select>


  <select ng-model="data.functionToApply" 
  ng-change="updateDisplay()"
  data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates"
  ng-init="data.functionToApply = blisterPackTemplates[0]"
  ng-show="(data.showOptions=='true') && data.toggle"
  >
    
</select>


	 <!--<span class="nowrap" ng-show="(data.showOptions=='true') && data.toggle">Dummy:</span>-->
   <input type="text"...

CSS

ul {
  list-style: circle;
  }
  
ul.ex{
  list-style: circle;
  background-color: lightblue;
    width: 740px;
    height: 740px;
    overflow: scroll;
    
}
li {
  margin-left: 20px;
  
}



.nowrap {
    white-space: nowrap;
}

table.colored {border-style: ridge;
border-width: medium;
background-color: #98AFC7;
}

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: black;
    padding: 0px 0px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    
    margin: 4px 2px;
    cursor: pointer;
}

.buttonexpcollps {
    background-color: #4CAF50; /* Green */
    border: none;
    color: black;
    padding: 0px 4px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    
    margin: 4px 2px;
    cursor: pointer;
}
.buttonitem {background-color: lightblue;} /* Blue */
.buttoncollapse {background-color: #98AFC7;} /* Blue */

JavaScript

angular.module("myApp", []).
controller("TreeController", ['$scope', function($scope) {
  
  
  var uniqueId = 1;
	$scope.toggle = false;
  $scope.tree = [{
    name: "UserDictionaryRecord",
    functionToApply: "",
    sel_option: "",
    dummy: "",
    toggle: false,
    showOptions:"true",
    uniqueId: uniqueId,
      nodes: []
    }];

	var outDataString = "";
  
  
  function changingToggles(uid, temp_tree, len)
	{
  	for(var k = 0; k < len; k++)
    {
    	if(temp_tree[k].uniqueId!=uid)
      {
      	temp_tree[k].toggle = false;
      }
      if(temp_tree[k].nodes.length>0)
      {
        changingToggles(uid, temp_tree[k].nodes, temp_tree[k].nodes.length)
      }	
    }
    
  }
  
  $scope.changeOtherToggles = function(uniqueIdentifier)
  {
  		//temp_tree = $scope.tree.slice();
  		changingToggles(uniqueIdentifier, $scope.tree, 1);
  };
  
  
	function GenerateMetaFile(temp_tree, temp_parent_list, len){
  	
    	for(var k = 0; k < len; k++)
      {
      	list_copy_for_children = temp_parent_list.slice();
        list_copy_for_children.push(temp_tree[k].name)
      	//temp_parent_list.push(temp_tree[k].name)
        //for(var tt in temp_parent_list)
        if((temp_tree[k].functionToApply.name!="Select Function")&&(temp_tree[k].dummy!=""))
        {
          if(temp_tree[k].sel_option.name == "this")
          {
          
              //console.log('inside this.................')
              //Starts displaying levels from All/Date
              for(i = 1; i < (temp_parent_list.length-1); i++ )
              {
                  outDataString = outDataString + temp_parent_list[i]+","
              }
              //Adding Outer Key....
              outDataString = outDataString + temp_parent_list[(temp_parent_list.length-1)]+",";
              //Adding Inner Key....
              outDataString = outDataString + temp_tree[k].name+",";
              //Adding Selected Function....
              outDataString = outDataString +...