angularjs中的层次结构实现

我是angularjs的新手，希望实现一些

层次结构

屏幕，用户可以在其中添加新组、该组的子组等等。（父/子层次结构）

像这样的

1管理员

1.1------用户管理员

1.1.1------技术支持管理员

1.1.1.1------------------技术支持团队

1.2------登录管理员

1.2.1------------------概况

1.3------客户管理

1.3.1------客户1

1.3.2------客户2

2个用户

2.1------用户1

2.2------用户2

2.3------用户3

我搜索了一些教程，找到的唯一解决问题的方法是

但我对此并不满意，因为我必须为所有节点（父节点/子节点）添加图像/化身，然后根据它们的父节点为每个节点分配一些角色。但是

ui-tree

没有任何过程来添加自定义节点或任何节点的子节点

---

有没有更好的办法？任何形式的帮助都将不胜感激。

我在类似的东西上推出了自己的解决方案。我不记得为什么我没有使用ui树。我需要的是一种递归创建视图的方法，这样我就可以模拟文件系统。这对您来说应该更简单，因为您没有像我那样尝试拆分文件和文件夹

使用递归助手，我可以像这样声明我的数据结构：

$scope.items = [
  new File('item1', '/item1', 11, false),
  new File('item2', '/item2', 22, true),
  new File('item3', '/item3', 33, false),
  new File('A Really Long File Name Should Go Here', '/item4', 44, false),
  new Folder('Folder 1', '/folder1', [new File('item5', '/item5', 55, false)], false)
];

我可以用这个来渲染它：

<table class="table table-condensed table-responsive">
<tbody>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Size</th>
      <th></th>
    </tr>
    <tr ng-repeat="item in getFiles()">
      <td class="minWidth4px">
        <input type="checkbox" ng-model="item.isSelected" />
      </td>
      <td class="truncateName">
        {{item.name}}
      </td>
      <td class="minWidth4px">{{item.size}}mb</td>
      <td ng-show="item.canPreview()" class="minWidth4px">
        <button class="btn" ng-click="openPreview(item)">Preview</button>
      </td>
    </tr>
    <tr ng-repeat="item in getFolders()" ng-click="openFolder(item)">
      <td class="minWidth4px">
        <i ng-show="item.isOpen" class="fa fa-folder-open-o"></i>
        <i ng-hide="item.isOpen" class="fa fa-folder-o"></i>
      </td>
      <td colspan="3">
        <label>{{item.name}}</label>
        <attachments ng-show="item.isOpen" items="item.items"></attachments>
      </td>
    </tr>
  </tbody>
</table>

---

我不能认为递归助手是它的核心。递归助手是希望这有帮助。

我在类似的东西上推出了自己的解决方案。我不记得为什么我没有使用ui树。我需要的是一种递归创建视图的方法，这样我就可以模拟文件系统。这对您来说应该更简单，因为您没有像我那样尝试拆分文件和文件夹

使用递归助手，我可以像这样声明我的数据结构：

$scope.items = [
  new File('item1', '/item1', 11, false),
  new File('item2', '/item2', 22, true),
  new File('item3', '/item3', 33, false),
  new File('A Really Long File Name Should Go Here', '/item4', 44, false),
  new Folder('Folder 1', '/folder1', [new File('item5', '/item5', 55, false)], false)
];

我可以用这个来渲染它：

<table class="table table-condensed table-responsive">
<tbody>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Size</th>
      <th></th>
    </tr>
    <tr ng-repeat="item in getFiles()">
      <td class="minWidth4px">
        <input type="checkbox" ng-model="item.isSelected" />
      </td>
      <td class="truncateName">
        {{item.name}}
      </td>
      <td class="minWidth4px">{{item.size}}mb</td>
      <td ng-show="item.canPreview()" class="minWidth4px">
        <button class="btn" ng-click="openPreview(item)">Preview</button>
      </td>
    </tr>
    <tr ng-repeat="item in getFolders()" ng-click="openFolder(item)">
      <td class="minWidth4px">
        <i ng-show="item.isOpen" class="fa fa-folder-open-o"></i>
        <i ng-hide="item.isOpen" class="fa fa-folder-o"></i>
      </td>
      <td colspan="3">
        <label>{{item.name}}</label>
        <attachments ng-show="item.isOpen" items="item.items"></attachments>
      </td>
    </tr>
  </tbody>
</table>

---

我不能认为递归助手是它的核心。递归助手希望这有帮助。

为了实现以下结构，添加了属性名$parentNodesScope以获取父索引，因此我添加了

{{this.$parentNodesScope.$parentNodesScope.$index+1}}。
{{this.$parentNodesScope.$index+1}}。
{{$index+1}{{node.title}}

1管理员

1.1------用户管理员

1.1.1------技术支持管理员

1.1.1.1------------------技术支持团队

1.2------登录管理员

1.2.1------------------概况

1.3------客户管理

1.3.1------客户1

1.3.2------客户2

2个用户

2.1------用户1

2.2------用户2

2.3------用户3

这是我的JSFIDLE链接

---

为了实现以下结构，添加了属性名$parentNodesScope以获取父索引，因此我添加了

{{this.$parentNodesScope.$parentNodesScope.$index+1}}。
{{this.$parentNodesScope.$index+1}}。
{{$index+1}{{node.title}}

1管理员

1.1------用户管理员

1.1.1------技术支持管理员

1.1.1.1------------------技术支持团队

1.2------登录管理员

1.2.1------------------概况

1.3------客户管理

1.3.1------客户1

1.3.2------客户2

2个用户

2.1------用户1

2.2------用户2

2.3------用户3

这是我的JSFIDLE链接

好久不见。。让我把我的解决方案贴在这里，也许对其他人有帮助

所以基本上我是在一些自定义更改的帮助下完成的，添加了头像和链接等

<div class="panel-body">
     <div class="col-sm-12">
        <div ui-tree id="tree-root" ng-if="data.length > 0" data-drop-enabled="false" data-drag-enabled="false" data-nodrop-enabled="true">
           <ol ui-tree-nodes ng-model="data">
              <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'" ></li>
           </ol>
        </div>
     </div>
  </div>

这是我的剧本

<script type="text/ng-template" id="nodes_renderer.html">

 <div ui-tree-handle class="tree-node tree-node-content">

   <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 class="btn btn-xs" data-nodrag>
       <img ng-src="{{node.image}}" class="img-avatar" alt="Avatar" height="35" width="35"></a>
   {{node.title}}


   <div class="dropdown pull-right ">
       <a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" data-nodrag><span class="glyphicon glyphicon-th-list"></span></a>
       <div class="dropdown-content dropdown-menu" data-nodrag>
           <a ng-show = "flagCreateUserHierarchy" ng-click="btnAddUserClick(this)"><i class="fa fa-user"></i> Add User</a>
           <a ng-show = "flagUpdateUserHierarchy" ng-click="btnEditClick(this)"><i class="fa fa-folder-open"></i> Edit</a>
           <a ng-show="{{node.type}} <2 && flagUpdateUserHierarchy" ng-click="btnEditGroupClick(this)"><i class="fa fa-folder-open"></i> Edit Group Name</a>
           <a ng-show = "flagUpdateUserHierarchy" ng-click="btnDeleteHierarchy(this)"><i class="fa fa-ban"></i> Delete</a>
       </div>
   </div>

如果有人需要理解，我可以进一步解释整个过程

好久不见。。让我把我的解决方案贴在这里，也许对其他人有帮助

所以基本上我是在一些自定义更改的帮助下完成的，添加了头像和链接等

<div class="panel-body">
     <div class="col-sm-12">
        <div ui-tree id="tree-root" ng-if="data.length > 0" data-drop-enabled="false" data-drag-enabled="false" data-nodrop-enabled="true">
           <ol ui-tree-nodes ng-model="data">
              <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'" ></li>
           </ol>
        </div>
     </div>
  </div>




这是我的剧本

<script type="text/ng-template" id="nodes_renderer.html">

 <div ui-tree-handle class="tree-node tree-node-content">

   <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 class="btn btn-xs" data-nodrag>
       <img ng-src="{{node.image}}" class="img-avatar" alt="Avatar" height="35" width="35"></a>
   {{node.title}}


   <div class="dropdown pull-right ">
       <a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" data-nodrag><span class="glyphicon glyphicon-th-list"></span></a>
       <div class="dropdown-content dropdown-menu" data-nodrag>
           <a ng-show = "flagCreateUserHierarchy" ng-click="btnAddUserClick(this)"><i class="fa fa-user"></i> Add User</a>
           <a ng-show = "flagUpdateUserHierarchy" ng-click="btnEditClick(this)"><i class="fa fa-folder-open"></i> Edit</a>
           <a ng-show="{{node.type}} <2 && flagUpdateUserHierarchy" ng-click="btnEditGroupClick(this)"><i class="fa fa-folder-open"></i> Edit Group Name</a>
           <a ng-show = "flagUpdateUserHierarchy" ng-click="btnDeleteHierarchy(this)"><i class="fa fa-ban"></i> Delete</a>
       </div>
   </div>



如果有人需要理解，我可以进一步解释整个过程
 “ui树没有任何添加自定义节点或任何节点的子节点的过程”我不理解您的顾虑。你可以随意设计节点。“ui树没有任何程序来添加自定义节点或任何节点的子节点”我不理解你的顾虑。可以按自己的喜好设计节点。