ツリービュー効果の例を実装するための AngularJS 再帰命令-jsチュートリアル-php.cn

ツリービュー効果の例を実装するための AngularJS 再帰命令

高洛峰

リリース： 2016-12-07 15:18:24

オリジナル

1438 人が閲覧しました

この記事の例では、AngularJS 再帰命令を使用してツリービュー効果を実現する方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

階層データ構造の表示では、ツリーは非常に一般的な表示方法です。たとえば、システム内のディレクトリ構造、企業の組織構造、電子商取引の商品分類などはすべて共通のツリー構造データです。

ここでは、Angular を使用してこのタイプの一般的なツリービュー構造を実装します。

まずデータ構造を定義し、children 属性を使用して子ノードを接続し、ツリー階層を表示します。

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

ログイン後にコピー

次に、NG 方法のツリービューを次のように実装できます。 JavaScript:

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>

ログイン後にコピー

各項目ノードのHTML:/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>

ログイン後にコピー

ここでのトリックはng-include を使用して子ノードとデータをロードし、warpCallback メソッドを使用して関数の外部コールバック関数を転送し、未登録のコールバックシナリオを回避するために angular.noop の空のオブジェクトモードを使用します。 View インタラクションのデータ分離はメタデータオブジェクトに直接カプセル化されますが、$$isChecked や $$isExpend など、すべて $$ で始まります。 Angular プログラムで $$ で始まるオブジェクトは内部プライベート変数とみなされ、angular.toJson の実行中にシリアル化されないため、$http を使用して更新のためにサーバーに送り返す場合、送信されるデータには影響しません。サーバーによって。同時に、クライアント側では、デフォルトでノードを選択する item.$$isChecked など、オブジェクトの $$ プロパティを使用してビューの状態を制御することもできます。

このツリービューは次のように使用できます:

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

ログイン後にコピー

ツリー ビュー効果の例を実装するための AngularJS 再帰命令

ツリービュー効果の例を実装するための AngularJS 再帰命令