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

时间:2016-11-28 07:17:39

标签: javascript angularjs tree parent-child angular-ui-tree

我使用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>

我正在接受输出。

enter image description here

1 个答案:

答案 0 :(得分:0)

它与树OL无关我刚刚添加了CSS,它对我来说非常适合

//index-view.js
import { config } from 'electrode-confippet';
const auth0Config = config.$('settings.auth0');

function createReduxStore(req, match) { // eslint-disable-line
  const initialState = {
    user: null,
    checkBox: { checked: false },
    number: { value: 999 },
    config: { auth: auth0Config },
  };

  const store = createStore(rootReducer, initialState);
  return Promise.resolve(store);
}