Angularjs recursive instruction to implement tree view effect example _angularjs

This paper illustrates the method of angularjs recursive instruction to realize tree view effect. Share to everyone for your reference, specific as follows:

In the hierarchical data structure display, the tree is an extremely common display way. For example, the directory structure of the system, enterprise organization structure, E-commerce product classification are common tree structure data.

Here we use the angular approach to implement this common tree view structure.

First we define the data structure, using the children attribute to hook up the child nodes to show the tree hierarchy, examples are as follows:

[
  {
   "id": "1", "
   pid": "0",
   "name": "Home Appliances",
   "Children": [
     {
      "id": "4",
      "pid": "1",
      "name": "Everyone Power"
     }
  },
  {
   ...
  }
  ...
]

Then we can implement the tree view of Ng way as:

Javascript:

Angular.module (' Ng.demo ', []). directive (' treeView ', [function () {return {restrict: ' E ', Templateurl: '/tree View.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: ite
       M, $event: $event  });
     };
 }]
   };

 }]);

Html:

Tree Content Theme HTML:/treeview.html

<ul class= "Tree-view" >
    <li ng-repeat= "item in Treedata" Ng-include= "'/treeitem.html '" ></li>
</ul>

html:/treeitem.html for each item node

<i ng-click= "itemexpended (item, $event);" class= "" ></i>
<input type= "checkbox" Ng-model= "item.$$ IsChecked "class=" Check-box "ng-if=" canchecked "ng-change=" Warpcallback (' itemcheckedchanged ', item, $event) ">
<span class= ' Text-field ' ng-click= ' warpcallback (' itemclicked ', item, $event); " ></span>
<ul ng-if= "!isleaf (item)" Ng-show= "item.$ $isExpend" >
  <li ng-repeat= "item in Item.children "ng-include=" '/treeitem.html ' ">
  </li>
</ul>

The trick here is to use ng-include to load child nodes and data, and to use a Warpcallback method to transfer function external callback functions, using Angular.noop's empty object pattern to avoid unregistered callback scenarios. Data isolation for view interaction takes the form of a direct encapsulation in a metadata object, but they all start with $$, such as $ $isChecked, $ $isExpend. objects that begin with $$ in the angular program are considered internal private variables that are not serialized when Angular.tojson, so they do not affect the data delivered by the server when they are sent back to the server-side update. At the same time, on the client side, we can use these $$ properties of the object to control the state of the view, such as the item.$ $isChecked to select a node by default.

We can use this tree-view in the following ways:

 code as follows:

<tree-view tree-data= "Demo.tree" text-field= "name" value-field= ' id ' item-clicked= "demo.itemclicked ($item)" Item-checked-changed= "demo.itemcheckedchanged ($item)" can-checked= "true" ></tree-view>

The effect is as follows:

I hope this article will help you to Angularjs program design.