Angularjs 如何在角材质中创建手风琴下拉菜单？

如果你去这个网站， 您会注意到sidenav中有一个非常不错的手风琴下拉菜单

我正试图找到这个功能的简化版本。 我已经研究了很多例子，其中很多似乎已经不起作用了

我不需要它复杂。所以不需要重复的项目。我都能做到。我需要基本的功能

根据我的研究，他们有一个expando功能正在开发中，但在此之前有没有解决办法

更新：

我没能找到一个好的角度材料设计，但我能找到一个角度方法

---

下面的小提琴确实帮了我的忙：

我还添加了一个功能，允许一次只扩展一个菜单，如果其他菜单打开，它将自动关闭它们。

控制器中的代码：

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

在这里，我们固定了可扩展列表的高度，以保持列表项仍然可见，否则一旦您扩展了一个包含大量内容的div，用户可能会觉得它是唯一可用的列表项，如果扩展了任何div，则可能无法看到其他项，

overflow:scroll

允许浏览视图，否则会很僵硬，用户无法查看整个内容

---

希望这有帮助……：）

这就是我最后使用的

指令HTML代码

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

需要一个左右箭头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>

---

如果是的话，另一个可能是重复的。你说得对。事实上，人们可能会首先找到你的问题，因此知道它与另一个问题密切相关可以帮助他们更快地找到解决方案，因为它已经接受了答案。

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

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