web-dev-qa-db-ja.com

AngularJSで折りたたみ可能なツリーを表示する方法+ Bootstrap

リストを使用してツリーを表示する必要があるWebアプリを構築しています。私の基本的な構造は次のようになります：

* Node 1
    * Node 1.1
        * Node 1.1.1
            * Node 1.1.1.1
        * Node 1.1.2
    * Node 1.2

http://jsfiddle.net/QffFm/1/

私はangularまたはbootstrap私が使用できるようなもので何かを見つけようとしています：

  • リストの最初のビューでは、3番目のレイヤーまで展開されます。私のフィドルでは、Node 1、Node 1.1、Node 1.1.1、Node 1.1.2およびNode 1.2（4番目のレイヤーを除くすべて-Node 1.1.1.1）
  • リスト形式のアイコン（ノードのWord名ではない）をクリックすると、ノードが折りたたまれたり展開されたりします。
  • 理想的には、アイテムが展開されているかどうかによってもアイコンが変化することを望みます。さらに下にある場合は右矢印、既に展開されている場合は下矢印、子がない場合は通常のリスト項目

私はAngularJSに非常に慣れていませんが、Bootstrapも非常に新しいです。Angularには、すべてを完全には処理していないように見えるアコーディオン関数があります。それが必要です。

さまざまなケースを処理する多くのロジックをWebアプリにコード化する前に、最善のアプローチの方向性が欲しいです。これはよくある問題だと思いますので、すぐに使えるものがあると思います。どんなガイダンスもいただければ幸いです。

HTMLコード：

<div ng-app="myApp" ng-controller="controller">
    <my-directive></my-directive>
    <table style="width: 100%"><tbody><td>
        <tree items="tree"></tree>
    </td></tbody></table>
</div>

角度コード：

var app = angular.module('myApp', []);

app.controller('controller', function ($scope){ 

    $scope.tree=[{"name":"Node 1","items":[{"name":"Node 1.1","items":[{"name":"Node 1.1.1","items":[{"name":"Node 1.1.1.1","items":[]}]},{"name":"Node 1.1.2","items":[]}]},{"name":"Node 1.2","items":[]}]}];

});
app.directive('tree', function() {
    return {
        template: '<ul><tree-node ng-repeat="item in items"></tree-node></ul>',
        restrict: 'E',
        replace: true,
        scope: {
            items: '=items',
        }
    };
});

app.directive('treeNode', function($compile) {
    return { 
        restrict: 'E',
        template: '<li >{{item.name}}</li>',
        link: function(scope, Elm, attrs) {
        if (scope.item.items.length > 0) {
            var children = $compile('<tree items="item.items"></tree>')(scope);
            Elm.append(children);
        }
    }
    };
});
javascriptangularjstwitter-bootstrapcollapse
13
Korra

次の例では私が使用しました：

  • bootstrap
  • AngularJS再帰ng-includeまたは（2番目の例を参照）再帰的ディレクティブ
  • jQuery（将来は回避しようとする）

デモ1（ng-include） Plunker

enter image description here

このモデルから：

 $scope.displayTree =
            [{
            "name": "Root",
            "type_name": "Node",
            "show": true,
            "nodes": [{
                "name": "Loose",
                "group_name": "Node-1",
                "show": true,
                "nodes": [{
                    "name": "Node-1-1",
                    "device_name": "Node-1-1",
                    "show": true,
                    "nodes": []
                }, {
                    "name": "Node-1-2",
                    "device_name": "Node-1-2",
                    "show": true,
                    "nodes": []
                }, {
                    "name": "Node-1-3",
                    "device_name": "Node-1-3",
                    "show": true,
                    "nodes": []
                }]
            }, {
                "name": "God",
                "group_name": "Node-2",
                "show": true,
                "nodes": [{
                    "name": "Vadar",
                    "device_name": "Node-2-1",
                    "show": true,
                    "nodes": []
                }]
            }, {
                "name": "Borg",
                "group_name": "Node-3",
                "show": true,
                "nodes": []
            }, {
                "name": "Fess",
                "group_name": "Node-4",
                "show": true,
                "nodes": []
            }]
        }];
        [{
            "name": "Android",
            "type_name": "Android",
            "icon": "icon-Android icon-3",
            "show": true,
            "nodes": []
        }];
    }

2番目の例は、2つのディレクティブに基づいています。

app.directive('nodeTree', function() {
      return {
        template: '<node ng-repeat="node in tree"></node>',
        replace: true,
        transclude: true,
        restrict: 'E',
        scope: {
          tree: '=ngModel'
        }
      };
});

app.directive('node', function($compile) {
  return { 
    restrict: 'E',
    replace:true,
     templateUrl: 'the-tree.html',
    link: function(scope, Elm, attrs) {

      // ....     

      if (scope.node.children.length > 0) {
        var childNode = $compile('<ul ><node-tree ng-model="node.children"></node-tree></ul>')(scope)
        Elm.append(childNode);
      }
    }
  };
});

（いくつかのチェックボックスも追加：））

デモ2 Plunker

見た目：

enter image description here

32
Maxim Shoustin