AngularJS遞歸指令實作Tree View效果範例-js教程-PHP中文網

AngularJS遞歸指令實作Tree View效果範例

高洛峰

發布： 2016-12-07 15:18:24

原創

1438 人瀏覽過

本文實例講述了AngularJS遞歸指令實作Tree View效果的方法。分享給大家供大家參考，具體如下：

在層次資料結構展示中，樹是極為常見的展現方式。例如係統中目錄結構、企業組織結構、電子商務產品分類都是常見的樹狀結構資料。

這裡我們採用Angular的方式來實作這類常見的tree view結構。

首先我們定義資料結構，採用以children屬性來掛接子節點方式來展現樹層次結構，示例如下：

[
  {
   "id":"1",
   "pid":"0",
   "name":"家用电器",
   "children":[
     {
      "id":"4",
      "pid":"1",
      "name":"大家电"
     }
   ]
  },
  {
   ...
  }
  ...
]

登入後複製

則我們對於Javang way的tree view可以實現為：

則我們對於Javang way的tree view:

angular.module(&#39;ng.demo&#39;, [])
.directive(&#39;treeView&#39;,[function(){
   return {
     restrict: &#39;E&#39;,
     templateUrl: &#39;/treeView.html&#39;,
     scope: {
       treeData: &#39;=&#39;,
       canChecked: &#39;=&#39;,
       textField: &#39;@&#39;,
       itemClicked: &#39;&&#39;,
       itemCheckedChanged: &#39;&&#39;,
       itemTemplateUrl: &#39;@&#39;
     },
     controller:[&#39;$scope&#39;, function($scope){
       $scope.itemExpended = function(item, $event){
         item.$$isExpend = ! item.$$isExpend;
         $event.stopPropagation();
       };
       $scope.getItemIcon = function(item){
         var isLeaf = $scope.isLeaf(item);
         if(isLeaf){
           return &#39;fa fa-leaf&#39;;
         }
         return item.$$isExpend ? &#39;fa fa-minus&#39;: &#39;fa fa-plus&#39;;
       };
       $scope.isLeaf = function(item){
        return !item.children || !item.children.length;
       };
       $scope.warpCallback = function(callback, item, $event){
         ($scope[callback] || angular.noop)({
           $item:item,
           $event:$event
         });
       };
     }]
   };
 }]);

登入後複製

HTML:

🎜樹內容主題 HTML：/treeView.html🎜

<ul class="tree-view">
    <li ng-repeat="item in treeData" ng-include="&#39;/treeItem.html&#39;" ></li>
</ul>

登入後複製

🎜 🎜🎜🎜這裡的技巧在於利用ng-include來載入子節點和數據，並利用一個warpCallback方法來轉接函數外部回調函數，利用angular.noop的空物件模式來避免未註冊的回呼場景。對於View互動的資料隔離採用了直接封裝在元資料物件的方式，但它們都以$$開頭，如$$isChecked、$$isExpend。在Angular程式中以$$開頭的物件會被視為內部的私有變量，在angular.toJson的時候，它們並不會被序列化，所以利用$http發回服務端更新的時候，它們並不會影響服務端傳送的資料。同時，在客戶端，我們也能利用物件的這些$$屬性來控制View的狀態，如item.$$isChecked來預設選取某一節點。 🎜🎜我們就可以如下方式來使用這個tree-view：🎜

<i ng-click="itemExpended(item, $event);" class=""></i>
<input type="checkbox" ng-model="item.$$isChecked" class="check-box" ng-if="canChecked" ng-change="warpCallback(&#39;itemCheckedChanged&#39;, item, $event)">
<span class=&#39;text-field&#39; ng-click="warpCallback(&#39;itemClicked&#39;, item, $event);"></span>
<ul ng-if="!isLeaf(item)" ng-show="item.$$isExpend">
  <li ng-repeat="item in item.children" ng-include="&#39;/treeItem.html&#39;">
  </li>
</ul>

登入後複製