Angualr UIツリーのノード番号を取得する[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

それは木の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, ".") " "; 
} 

私のために完璧に動作