0

我正在使用 Angular UI 树来实现项目类别关系,在默认实现中一切正常,但现在需要获取树中的节点/节号来管理层次结构。

我跟进此 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>

我得到以下输出。

在此处输入图像描述

4

1 回答 1

0

它与树 OL 无关,我只是在 CSS 之后添加的,它对我来说非常有用

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

于 2016-11-30T01:13:23.250 回答