Utilizing Angular UI tree to create a relationship between items and categories has been successful in the default setup. However, a new requirement has emerged to incorporate node/section numbering within the tree for managing hierarchy.
I attempted to implement the functionality from this Codepen template to achieve the desired output but encountered challenges along the way.
<div id="template" class="collapse fade ">
<div class="row">
<div class="col-sm-12">
<div ui-tree id="tree-root">
<ol ui-tree-nodes="" ng-model="data">
<li ng-repeat="node in data" ui-tree-node ng-click="nodeClicked(node)">
<div class="tree-node tree-node-content">
<i ui-tree-handle class="fa fa-bars"></i>
<a class="btn btn-success btn-xs" ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)">
<span class="glyphicon" ng-class="{
'glyphicon-chevron-right': collapsed,
'glyphicon-chevron-down': !collapsed
}"></span>
</a>
<a editable-text="node.title" class="gg-editable-a" > </a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;">
<span class="glyphicon glyphicon-plus"></span></a>
</div>
<ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}" >
<li ng-repeat="node in node.nodes" ui-tree-node ng-click="nodeClicked(node)">
<div class="tree-node tree-node-content">
<i ui-tree-handle class="fa fa-bars"></i>
<a class="btn btn-success btn-xs" ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)">
<span class="glyphicon" ng-class="{
'glyphicon-chevron-right': collapsed,
'glyphicon-chevron-down': !collapsed
}"></span>
</a>
<a editable-text="node.title" class="gg-editable-a" > </a>
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)">
<span class="glyphicon glyphicon-remove"></span></a>
</div>
</li>
</ol>
</li>
</ol>
</div>
</div>
<div class="col-sm-6 hidden ">
<div class="info">
@{{info}}
</div>
<input class="hidden" name='meetingSections' id='meetingSections' value="@{{ data | json }}" />
</div>
</div>
The rendered output is as shown below: