Rekursive AngularJS-Anweisung zum Implementieren eines Beispiels für den Tree View-Effekt

Das Beispiel in diesem Artikel beschreibt, wie rekursive AngularJS-Anweisungen den Tree View-Effekt implementieren. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Bei der Anzeige hierarchischer Datenstrukturen sind Bäume eine äußerst häufige Anzeigemethode. Beispielsweise handelt es sich bei der Verzeichnisstruktur, der Unternehmensorganisationsstruktur und der E-Commerce-Produktklassifizierung im System um gängige baumstrukturierte Daten.

Hier verwenden wir Angular, um diese Art von allgemeiner Baumansichtsstruktur zu implementieren.

Zuerst definieren wir die Datenstruktur und verwenden das Children-Attribut, um untergeordnete Knoten zu verbinden, um die Baumhierarchie anzuzeigen. Das Beispiel lautet wie folgt:

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

Dann kann unsere Baumansicht für ng way wie folgt implementiert werden:

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:

HTML des Bauminhaltsthemas: /treeView.html

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

HTML jedes Elementknotens: /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>

Der Trick hier besteht darin, ng-include zum Laden untergeordneter Knoten und Daten zu verwenden und eine warpCallback-Methode zu verwenden, um die externe Rückruffunktion der Funktion im leeren Objektmodus zu übertragen von angle.noop. Vermeiden Sie nicht registrierte Rückrufszenarien. Die Datenisolation für die View-Interaktion ist direkt in Metadatenobjekten gekapselt, sie beginnen jedoch alle mit $$, wie z. B. $$isChecked und $$isExpend. Objekte, die im Angular-Programm mit $$ beginnen, werden während der Datei „angular.toJson“ nicht serialisiert. Wenn sie also zum Zurücksenden an den Server zur Aktualisierung verwendet werden, werden sie nicht serialisiert vom Server gesendet. Gleichzeitig können wir auf der Clientseite diese $$-Eigenschaften des Objekts auch verwenden, um den Status der Ansicht zu steuern, z. B. item.$$isChecked, um standardmäßig einen Knoten auszuwählen.

Wir können diese Baumansicht wie folgt verwenden:

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