Alt menü (genişletilmiş/daraltılmış ağaç) AngularJS

Question

Geçtiğimiz gün, alt menüleri olan bir menü listesini kontrol etmek için açısal kullanımı en iyi yolu bulmaya takıldım.

jQuery ile bir tıklama olayını <li> gibi belirli bir öğe türünde dinleyebilir ve açılacak bir menü için alt öğeye bir sınıf ekleyebilirsiniz.

Bu sayfadaki menü ile aynı şeyi yapmaya çalışıyorum http://geedmo.com/themeforest/wintermin/dashboard.html, Angular ile. Ancak kendi yönergemi veya ng-hide ve ng-show gibi mevcut olanları kullanarak doğru yolu bulamıyorum.

Eğer bunun en iyi şekilde nasıl yapıldığına dair bir örnek kılavuzları varsa, günüm korunur.

Her gün yeni bir şey öğrenmek için yeni açılıyım.

Answer 1

AngularJS'de genişletilmiş/daraltılmış alt menü oluşturmak için aşağıdaki kodu kullanabilirsiniz.

Sizin için JSFiddle ekledim.

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

Sizin JS kontrolörü:

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"} 
      ] 
     } 
    ]; 
}; 

GÜNCELLEME: nedeniyle biz yeni menünün öğe üzerinde önceki tıkladığınızda o, yaklaşık yorumunuza Gönderimimi güncelledik

çökmüş olmalı.

Koddaki küçük değişiklikler.

İhtiyacınız olan yeni JSFiddle.

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

JS kontrolörü:

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 
    ]; 
};