获取 Angular UI Tree [angular-ui-tree] 中的节点号

Question

我正在使用 Angular UI 树来实现项目类别关系，在默认实现中一切正常，但现在的要求是在管理层次结构的树。

我按照 This Codepen 模板获取号码，但不幸的是，我没有得到想要的输出

<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>

我得到以下输出。

Answer 1

它与我刚刚在 CSS 之后添加的树 OL 无关，它非常适合我

.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, ".") " ";
}

获取 Angular UI Tree [angular-ui-tree] 中的节点号

get the node number in Angular UI Tree [angular-ui-tree]

javascript

tree

parent-child

angularjs

angular-ui-tree