트리 뷰 효과 예제를 구현하기 위한 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 way에 대한 트리 보기를 다음과 같이 구현할 수 있습니다.

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 메서드를 사용하여 함수의 외부 콜백 함수를 전송하는 것입니다. 빈 개체 모드를 사용합니다. 등록되지 않은 콜백 시나리오를 피하세요. View 상호 작용을 위한 데이터 격리는 메타데이터 개체에 직접 캡슐화되지만 $$isChecked 및 $$isExpend와 같이 모두 $$로 시작합니다. Angular 프로그램에서 $$로 시작하는 개체는 내부 개인 변수로 간주됩니다. angle.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>

로그인 후 복사