एंगुलरजेएस

Question

का उपयोग करके पेड़ संरचना को accordion या list (li) में बाध्य करने के लिए कैसे करें कोणीय का उपयोग करके वृक्ष संरचना को बाध्य करने के लिए कैसे करें। वृक्ष संरचना माता-पिता और बच्चे की तरह है। इसको कैसे लें? पूरी सूची बांधने में सक्षम हूँ।

कोणीय कोड:

$scope.groups = [ 
     { 
      ID: 1, 
      Name: "parent", 
      ParentID:0 
     }, 
     { 
      ID: 2, 
      Name: "child", 
      ParentID: 1 

     }, 
     { 
      ID: 3, 
      Name: "subchild1", 
      ParentID: 2 

     }, 
     { 
      ID: 4, 
      Name: "subchild2", 
      ParentID: 2 

     } 
    ]; 

दृश्य: मैं अकॉर्डियन के पेड़ लेकिन नहीं मिल रहा बाध्य करने की कोशिश की,

<uib-accordion close-others="oneAtATime"> 
    <div uib-accordion-group class="panel-default" ng-repeat="grp in groups" is-open="status.open"> 
     <uib-accordion-heading> 
      {{grp.Name}} <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> 
     </uib-accordion-heading> 
     {{grp.Name}} 
    </div> 
</uib-accordion> 

है किसी भी विकल्प अन्य तरीके से या तो अकॉर्डियन लेकिन कोणीय का उपयोग करने में पेड़ बाध्य करने के लिए

Answer 1

निश्चित रूप से AngularJS में इस पेड़ से बांधने का एक तरीका है! मेरे लिए यह ngRepeat के लिए एक महान उपयोग मामले की तरह लगता है! इस प्रयास करें:

<div ng-repeat="(key, value) in groups" 

    <h1> {{value.ID}} </h1> 
    <h2> {{value.Name}} </h2> 
    <h3> {{value.ParentID}} </h3> 

</div> 

आप पैनलों का विस्तार करने के तो मैं प्रत्येक वस्तु के लिए एक और संपत्ति जोड़ना होगा चाहते हैं, IsExpanded (या जो भी आप इसे कॉल करना चाहते हैं)। तो फिर तुम छिपाने/ngIf साथ कुछ इस तरह विस्तृत सामग्री दिखाने के लिए, कर सकते हैं:

<div ng-repeat="(key, value) in groups" 

    <h1> {{value.ID}} </h1> 
    <h2> {{value.Name}} </h2> 
    <h3> {{value.ParentID}} </h3> 

    <div ng-if="value.isExpanded === true"> 
    <h3> Expanded content </h3> 
    </div> 

</div> 

तुम भी विस्तार किया है और ngAnimate साथ div बंद करने के लिए अच्छा एनिमेट होने वाले संक्रमणों हो सकता था।

तुम भी Angular UI-Bootstrap Accordian या की जाँच (और यहां इसके बारे में एक codepen उदाहरण है: http://codepen.io/funkybudda/pen/vEbgVv) कर सकते हैं: http://embed.plnkr.co/3y0Rq1/

गुड लक

यहाँ एक AngularJS accordian की एक plunkr उदाहरण है!