I am using Angular UI tree to implement items categories relationship, everything is working fine in the default implementation, but now the requirement is to get the node/section number in the tree to manage hierarchy.
I follow up This Codepen template to get the number , but unfortunately, I didn't get the desired output
<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>
and I am getting following output.
it was not related with tree OL i just added following CSS and it works perfectly for me
.olist{
list-style-type: none;
counter-reset: item;
}
.olist li:before {
font-size: 15px;
}
.olist > li {
display: table; width: 100%;
counter-increment: item;
}
.olist > li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.3em;
}
li .olist > li {
margin: 0;
}
li .olist > li:before {
content: counters(item, ".") " ";
}