Question

我是angularjs的新手，想要实现一些hierarchy屏幕，用户可以在其中添加新组，子组到该组等等。（父/子层次结构）

像这样的东西

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

我搜索了一些教程，我发现的唯一解决方案是angular ui tree。

但我对此并不满意，因为我必须添加所有节点（父母/孩子）的图像/头像，然后必须根据父节点为每个节点分配一些角色。但是ui-tree没有任何添加任何节点的自定义节点或子节点的过程。

有没有更好的方法来做到这一点？任何形式的帮助将不胜感激。

Answer 1

为了实现以下结构，添加了属性名称 $ 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

这是我的jsfiddle链接 jsfiddle

Answer 2

我在类似的东西上推出了自己的解决方案。我不记得为什么我不跟ui-tree一起去。我需要的是一种递归创建视图的方法，以便我可以模仿文件系统。 Here's the plunk from when I was proofing it out.这对你来说应该更简单，因为你不是像我那样试图分割文件和文件夹。

使用递归帮助器，我能够声明我的数据结构：

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

这是附件的指令：

var attachmentsLink = function($scope) {
  $scope.openFolder = function(folder) {
    folder.isOpen = !folder.isOpen;
    console.log(folder);
  };

  $scope.getFiles = function() {
    return $scope.items.filter(function(x) {
      return x instanceof File;
    });
  };

  $scope.getFolders = function() {
    return $scope.items.filter(function(x) {
      return x instanceof Folder;
    });
  };
};

var attachmentsController = function($scope, previewService){
  $scope.openPreview = function(file) {
    previewService.preview = file;
    previewService.showPreview = true;
  };
};

var attachments = function(RecursionHelper) {
  return {
    compile: function(element) {
      return RecursionHelper.compile(element, attachmentsLink);
    },
    controller: attachmentsController,
    restrict: 'E',
    scope: {
      items:'=',
    },
    templateUrl: 'attachments.html'
  };
};

angular.module("app").directive("attachments", attachments);

我不能把它归功于递归助手。递归助手是here希望这有帮助。

Answer 3

很长一段时间..让我在这里发布我的解决方案......可能会帮助其他人..

所以基本上我在angular-ui-tree的帮助下做了这个，并添加了一些自定义更改以添加头像和链接等。这里是html代码;

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

这就是它的样子......

如果有人需要了解，我可以进一步解释整个程序。

angularjs中的层次结构实现

3 个答案: