Trình đơn phụ (cây mở rộng/thu gọn) trong AngularJS

Question

Tôi có ngày hôm qua bị kẹt khi tìm cách tốt nhất để sử dụng góc để điều khiển danh sách menu với menu phụ.

Với jQuery bạn chỉ có thể nghe sau sự kiện nhấp chuột trên một loại phần tử cụ thể như <li> và thêm lớp vào phần tử con của nó để mở menu.

Tôi đang cố gắng thực hiện tương tự như menu trên trang này http://geedmo.com/themeforest/wintermin/dashboard.html, với Góc. Nhưng không thể tìm được cách chính xác bằng cách sử dụng chỉ thị của riêng tôi hoặc chỉ thị hiện tại như ng-hide và ng-show.

Nếu có ai có hướng dẫn og ví dụ về cách thực hiện điều này một cách tốt nhất, ngày của tôi sẽ được lưu. :)

Tôi cũng mới làm quen với góc cạnh để học điều mới mỗi ngày.

Answer 1

Bạn có thể sử dụng mã sau để tạo menu con mở rộng/thu gọn trên AngularJS.

Tôi đã đính kèm JSFiddle ví dụ cho bạn.

<div ng-controller="MyCtrl"> 
    <ul> 
     <li ng-repeat="item in items" ng-click="showChilds(item)"> 
      <span>{{item.name}}</span> 
      <ul> 
       <li ng-repeat="subItem in item.subItems" ng-show="item.active"> 
        <span>---{{subItem.name}}</span> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

khiển JS của bạn:

function MyCtrl($scope) {  
    $scope.showChilds = function(item){ 
     item.active = !item.active; 
    }; 

    $scope.items = [ 
     { 
      name: "Item1", 
      subItems: [ 
       {name: "SubItem1"}, 
       {name: "SubItem2"} 
      ] 
     }, 
     { 
      name: "Item2", 
      subItems: [ 
       {name: "SubItem3"}, 
       {name: "SubItem4"}, 
       {name: "SubItem5"} 
      ] 
     }, 
     { 
      name: "Item3", 
      subItems: [ 
       {name: "SubItem6"} 
      ] 
     } 
    ]; 
}; 

UPDATE:

Tôi đã cập nhật bài của tôi do nhận xét của bạn về, rằng khi chúng ta click vào mục menu mới, trước đó nên được thu gọn.

Thay đổi nhỏ trong mã.

Mới JSFiddle với nhu cầu của bạn.

<div ng-controller="MyCtrl"> 
    <ul> 
     <li ng-repeat="item in items" ng-click="showChilds($index)"> 
      <span>{{item.name}}</span> 
      <ul> 
       <li ng-repeat="subItem in item.subItems" ng-show="item.active"> 
        <span>---{{subItem.name}}</span> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

Bạn JS điều khiển:

function MyCtrl($scope) {  
    $scope.showChilds = function(index){ 
     $scope.items[index].active = !$scope.items[index].active; 
     collapseAnother(index); 
    }; 

    var collapseAnother = function(index){ 
     for(var i=0; i<$scope.items.length; i++){ 
      if(i!=index){ 
       $scope.items[i].active = false; 
      } 
     } 
    }; 

    $scope.items = [ 
     // items array the same with the previous example 
    ]; 
};