कोणीय सामग्री में एक एग्रीजन ड्रॉपडाउन मेनू कैसे बनाता है?

Question

यदि आप https://material.angularjs.org वेबसाइट पर जाते हैं, आप sidenav में एक बहुत अच्छा Accordion ड्रॉपडाउन मेनू देखेंगे।

मैं इस सुविधा का एक सरल संस्करण खोजने की कोशिश कर रहा हूं। मैंने कई उदाहरणों में देखा है ऐसा लगता है कि उनमें से कई अब काम नहीं कर रहे हैं।

मुझे इसकी जटिल आवश्यकता नहीं है। तो दोहराव की जरूरत नहीं है। मैं वह सब कर सकता हूँ। मुझे बुनियादी कार्यक्षमता की आवश्यकता है।

जो मैंने शोध किया है उससे उनके पास एक विस्तारित सुविधा विकसित की जा रही है, लेकिन तब तक कोई काम नहीं है?

अपडेट किया गया:

मैं एक अच्छा कोणीय सामग्री डिजाइन ढूँढने में सक्षम नहीं था, लेकिन मैं एक कोणीय विधि को खोजने के लिए सक्षम था।

https://github.com/sherwaniusman/angular-accordion

Answer 1

तो यह है कि मैं क्या का उपयोग कर

निर्देशक एचटीएमएल कोड

नीचे एक सही की जरूरत है और तीर img

<ang-accordion one-at-a-time="true" icon-position="right" close-icon-url="<?php echo URL; ?>/img/icons/right-icon.png" open-icon-url="<?php echo URL; ?>/img/icons/down-icon.png">           
    <collapsible-item ng-repeat="item in items" item-title="" initially-open="">        

    <div>Text</div> 

    </collapsible-item>    
</ang-accordion> 

समाप्त हो गया है

स्क्रिप्ट शामिल करने के लिए

<script type="text/javascript" src="<?php echo URL; ?>/js/angular/controllers/accordion.js"></script> 

जेएस: accordion।js

app.controller('angAccordionController', ['$scope', function($scope){ 
    var collapsibleItems = []; 

     this.openCollapsibleItem = function(collapsibleItemToOpen) { 
     if($scope.oneAtATime) { 
      angular.forEach(collapsibleItems, function(collapsibleItem) { 
      collapsibleItem.isOpenned = false; 
      collapsibleItem.icon = collapsibleItem.closeIcon; 
      }); 
     } 
     collapsibleItemToOpen.isOpenned = true; 
     }; 

     this.addCollapsibleItem = function(collapsibleItem) { 
     collapsibleItems.push(collapsibleItem); 

     if ($scope.closeIconClass !== undefined || $scope.openIconClass !== undefined) { 
      collapsibleItem.iconsType = 'class'; 
      collapsibleItem.closeIcon = $scope.closeIconClass; 
      collapsibleItem.openIcon = $scope.openIconClass; 
     } 
     else if ($scope.closeIconUrl !== undefined || $scope.openIconUrl !== undefined) { 
      collapsibleItem.iconsType = 'url'; 
      collapsibleItem.closeIcon = $scope.closeIconUrl; 
      collapsibleItem.openIcon = $scope.openIconUrl; 
     } 

     collapsibleItem.iconIsOnLeft = $scope.iconPosition == 'left' ? true: false; 
     }; 

    }]) 
    .directive('angAccordion', function() { 
    return { 
    restrict: 'EA', 
    transclude: true, 
    replace: true, 
    scope: { 
     oneAtATime: '@', 
     closeIconUrl: '@', 
     openIconUrl: '@', 
     closeIconClass: '@', 
     openIconClass: '@', 
     iconPosition: '@' 
    }, 
    controller: 'angAccordionController', 
    template: '<div class="accordion" ng-transclude></div>' 
    }; 
}); 

angular.module('collapsibleItem', []).directive('collapsibleItem', function() { 
    return { 
    require: '^angAccordion', 
    restrict: 'EA', 
    transclude: true, 
    replace: true, 
    scope: { 
     itemTitle: '@', 
     itemDisabled: '=', 
     initiallyOpen: '@' 
    }, 
    link: function(scope, element, attrs, accordionController) { 

     scope.isOpenned = (scope.initiallyOpen == "true") ? true : false; 
     accordionController.addCollapsibleItem(scope); 

     if(scope.isOpenned) 
     scope.icon = scope.openIcon; 
     else 
     scope.icon = scope.closeIcon; 

     scope.toggleCollapsibleItem = function() { 

     if(scope.itemDisabled) 
      return; 

     if(!scope.isOpenned) { 
      accordionController.openCollapsibleItem(this); 
      scope.icon = scope.openIcon; 
     } 
     else { 
      scope.isOpenned = false; 
      scope.icon = scope.closeIcon; 
     } 
     }; 

     scope.getIconUrl = function (type) { 
     return type == 'url' ? scope.icon : null; 
     }; 
    }, 
    template: '<div class="collapsible-item" ng-class="{open: isOpenned}"><div class="title" ng-class="{disabled: itemDisabled}" ng-click="toggleCollapsibleItem()">{{itemTitle | limitTo:28 }}<i ng-show="iconsType == \'class\'" class="{{icon}} icon" ng-class="{iconleft: iconIsOnLeft}"></i><img ng-show="iconsType == \'url\'" class="icon" ng-class="{iconleft: iconIsOnLeft}" ng-src="{{getIconUrl(iconsType)}}" /></div><div class="body"><div class="content" ng-transclude></div></div></div>' 
    }; 
}); 

सीएसएस

.collapsible-item { 
    margin-bottom: 0px; 
} 

.collapsible-item .title { 
    padding: 10px; 
    background-color: #dfdfdf; 
    border: 0px solid #ccc; 
    cursor: pointer; 
} 

.collapsible-item .title .icon { 
    float: right; 
    height: 20px; 
    width: 20px; 
    font-size: 19px !important; 
    padding-right: 1px; 
} 

.collapsible-item .title .iconleft { 
    float: left !important; 
} 

.collapsible-item .title.disabled { 
    background: #eee; 
    color: #999; 
    cursor: text; 
} 

.collapsible-item .body { 
    position: relative; 
    top: -4px; 
    max-height: 0; 
    overflow: hidden; 
    border: 1px solid #ccc; 
    border-top: 0; 
    z-index: -1; 
    -webkit-transition: max-height 0.5s ease; 
    -moz-transition: max-height 0.5s ease; 
     -o-transition: max-height 0.5s ease; 
      transition: max-height 0.5s ease; 
} 

.collapsible-item .body .content { 
    padding: 5px 15px 5px 15px; 
} 

.collapsible-item.open .body { 
    max-height: 1000px; 
    z-index: 1; 
} 

Answer 2

निम्नलिखित बेला वास्तव में मुझे मदद मिली: Accordion example

मैं भी जो एक समय में केवल 1 मेनू के विस्तार की अनुमति देता है कार्यात्मकता जोड़ दी है, अगर दूसरों खोला, यह स्वतः ही उन्हें बंद हो जाएगा। नियंत्रक में

कोड:

function controller($scope) { 


    $scope.accordianData = [ 
           { "heading" : "About Us",   "content" : "" }, 
           { "heading" : "Terms of Use",  "content" : "" }, 
           { "heading" : "Privacy Policy", "content" : "" }, 
           { "heading" : "Help",    "content" : "" }, 
          ]; 
    ); 
     // To expand or collapse the current view 
     //This functionality automatically closes the other expanded lists 
     $scope.toggleView = function(ary, data, index){ 
     for(var i=0; i<ary.length; i++){ 
      if(i!=index) { ary[i].expanded=false; } 
      else { data.expanded=!data.expanded; } 
     } 
     } 
    } 

और देखें/एचटीएमएल कोड है:

<md-content id="dynamic-content" class="f-clear-padding"> 
     <div class="md-accordion" ng-repeat="data in accordianData"> 
     <!-- <md-toolbar ng-init="data.expanded = false" ng-click="data.expanded = !data.expanded"> this was the code in demo--> 
     <md-toolbar ng-init="data.expanded = false" ng-click="toggleView(accordianData, data, $index)"> 
     <div class="md-toolbar-tools"> 
      <!-- <h2> --> 
      <div ng-bind="data.heading"></div> 
      <!-- </h2> --> 
     <div flex=""></div> 
     <div ng-class="{expandCollapse:true, active:data.expanded}"></div> 
     </div> 
     </md-toolbar> 
     <div style="overflow:scroll" ng-class="{dataContent:true, activeContent:data.expanded}"> 
      <div style="padding:10px" ng-bind-html="data.content"></div> 
     </div> 
     <div> 
    </md-content> 

और:
बस मेरे आवश्यकताओं के अनुसार कार्यक्षमता का एक सा बदलाव सीएसएस भाग:

.md-accordion .expandCollapse { width:30px; height:30px; position:relative; font-size:20px; font-weight:bold; cursor:pointer; color:#fff; display:block; margin-top: -2px; margin-left: -2px; overflow:hidden; } 
.md-accordion .expandCollapse:active { border:0px; } 
.md-accordion .expandCollapse:before, .md-accordion .expandCollapse:after { width:30px; height:30px; display:block; position:absolute; top:0; left:0; line-height:32px; text-align:center; -webkit-transition: .3s all ease-out; transition: .3s all ease-out; } 
.md-accordion .expandCollapse:before { opacity:1 -webkit-transform: rotate(0deg); transform: rotate(0deg); content: "|"; margin-top:-3px; } 
.md-accordion .expandCollapse:after { opacity:1; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); content: "|"; margin-left:-3px; } 
.md-accordion .active:before { opacity:1; -webkit-transform: rotate(90deg); transform: rotate(90deg); margin-left:3px; margin-top:0px; } 
.md-accordion .dataContent { background: #F2F2F2; height:0px; overflow:hidden; -webkit-transition: .3s all ease-out; transition: .3s all ease-out; } 
.md-accordion .activeContent { height:60vh; padding:0; display:block; } 
.md-accordion md-toolbar{ cursor:pointer; border-bottom:1px solid rgb(63,107,181) } 

यहां सूची सूची को अभी भी दिखने के लिए विस्तारणीय सूची की ऊंचाई तय की गई है, अन्यथा जब आप एक बड़ी सामग्री वाले div को विस्तारित करते हैं तो उपयोगकर्ता यह महसूस कर सकता है कि यह एकमात्र सूची आइटम उपलब्ध है और हो सकता है यदि किसी भी div का विस्तार किया गया है तो अन्य आइटम देखने में सक्षम, overflow:scroll दृश्य को स्क्रॉल करने की अनुमति देता है, अन्यथा यह कठोर होगा और उपयोगकर्ता पूरी सामग्री को देखने के लिए नहीं छोड़ेगा।

आशा यह सहायक है ... :)