AngularJS recursive instruction to implement Tree View effect example

The example in this article describes how to use AngularJS recursive instructions to achieve the Tree View effect. Share it with everyone for your reference, the details are as follows:

In the display of hierarchical data structures, trees are an extremely common display method. For example, the directory structure, corporate organizational structure, and e-commerce product classification in the system are all common tree-structured data.

Here we use Angular to implement this type of common tree view structure.

First we define the data structure and use the children attribute to connect child nodes to display the tree hierarchy. The example is as follows:

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

Then our tree view for ng way can be implemented as:

JavaScript:

angular.module('ng.demo', [])
.directive('treeView',[function(){
   return {
     restrict: 'E',
     templateUrl: '/treeView.html',
     scope: {
       treeData: '=',
       canChecked: '=',
       textField: '@',
       itemClicked: '&',
       itemCheckedChanged: '&',
       itemTemplateUrl: '@'
     },
     controller:['$scope', 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 'fa fa-leaf';
         }
         return item.$$isExpend ? 'fa fa-minus': 'fa fa-plus';
       };
       $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:

Tree content theme HTML: /treeView.html

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

HTML of each item node:/treeItem.html

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

The trick here is to use ng-include is used to load child nodes and data, and a warpCallback method is used to transfer the external callback function of the function. The empty object mode of angular.noop is used to avoid unregistered callback scenarios. Data isolation for View interaction is directly encapsulated in metadata objects, but they all start with $$, such as $$isChecked and $$isExpend. Objects starting with $$ in the Angular program will be considered internal private variables. They will not be serialized during angular.toJson, so when using $http to send back to the server for updates, they will not be serialized. Affects the data sent by the server. At the same time, on the client side, we can also use these $$ properties of the object to control the state of the View, such as item.$$isChecked to select a node by default.

We can use this tree-view as follows:

<tree-view tree-data="demo.tree" text-field="name" value-field=&#39;id&#39; item-clicked="demo.itemClicked($item)" item-checked-changed="demo.itemCheckedChanged($item)" can-checked="true"></tree-view>