एंगुलरजेएस

Question

में उप मेनू (विस्तारित/संक्षिप्त पेड़) उप-मेन्यू के साथ मेनू सूची को नियंत्रित करने के लिए कोणीय का उपयोग करने के लिए सबसे अच्छा तरीका खोजने के लिए पिछले दिन मिल गया है।

jQuery के साथ आप <li> जैसे विशिष्ट प्रकार के तत्व पर एक क्लिक ईवेंट के बाद सुन सकते हैं और मेनू को खोलने के लिए अपने बच्चे तत्व में कक्षा जोड़ सकते हैं।

मैं कोणीय के साथ इस पृष्ठ http://geedmo.com/themeforest/wintermin/dashboard.html पर मेनू की तरह ही काम करने की कोशिश कर रहा हूं। लेकिन मेरे अपने निर्देश या मौजूदा लोगों जैसे ng-hide और ng-show का उपयोग करके सही तरीका नहीं मिल रहा है।

यदि किसी के पास कोई उदाहरण है और यह कैसे सबसे अच्छा तरीका है, इस पर मार्गदर्शिकाएं हैं, तो मेरा दिन बचाया जाएगा। :)

मैं कोणीय के लिए भी नया हूं इसलिए हर दिन नई चीज़ सीखना।

Answer 1

आप AngularJS पर विस्तारित/संक्षिप्त उपमेनू बनाने के लिए निम्न कोड का उपयोग कर सकते हैं।

मैंने आपके लिए JSFiddle उदाहरण संलग्न किया है।

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

आपका जे एस नियंत्रक:

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

अद्यतन:

मैं के बारे में, जब हम नए मेनू के आइटम पर क्लिक करें, पिछले है कि अपनी टिप्पणी की वजह से मेरी पोस्ट को नवीनीकृत किया है ढह जाना चाहिए

कोड में छोटे बदलाव। आपकी आवश्यकता के साथ

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

आप जे एस नियंत्रक:

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