Angular: File2GUI_Add_More_Buttons

http://angularjs.org/

by rishi007bansod

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.angularjs.org/angular-1.0.0rc8.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-change="updateDisplay();data.meta_row=displayUpdatedRowContent;" data-ng-options="optionTemplate as optionTemplate for optionTemplate in optionTemplates" ng-model="data.sel_option" ng-show="(data.showOptions=='true') && data.toggle">
    
</select>
<!--ng-init="data.sel_option = optionTemplates[0]" -->

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

<!--<span class="nowrap"...

CSS

span {
  /*min-height: 100px;*/
  display: inline-flex;
  margin-top: 4px;
  /*align-items: center;*/
  /*border: 1px solid aqua;*/
}

ul {
  list-style: circle;
}

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

input[type="file"] {
  display: none !important;
}

/*Making things right aligned*/

input.dictelements {
  /*float: right;*/
  width: 150px;
  height: 20px;
}


.alignrt
{
  float: right;
  vertical-align: middle;
}

li {
  margin-left: 20px;
}

.nowrap {
  white-space: nowrap;
}

table.colored {
  /*border-style: ridge;*/
  /*border-width: medium;*/
  background-color: #98AFC7;
  /*border-spacing: 40px 40px;*/
  margin-left: 50px;
  
}

td {
    
    padding: 10px;
}
.btn {
  font-family: Arial;
  color: #ffffff;
 
  background: #3f88b8;
  padding: 2px 4px 2px 4px;
  text-decoration: none;
}

.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;
}

textarea{
  margin-left: 60px;
}


/* 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,
    meta_row: "",
    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 != "Select Function") && (temp_tree[k].dummy != "")) {
        if (temp_tree[k].sel_option == "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 + temp_tree[k].functionToApply + ",";
          //Adding Dummy Variable Value....
          outDataString = outDataString +...