如何在Angular Material中创建手风琴下拉菜单？

Question

如果你去https://material.angularjs.org网站,你会注意到sidenav中一个非常好的Accordion下拉菜单.

我正在尝试找到此功能的简化版本.我看了很多例子,看起来很多人不再工作了.

我不需要它复杂.所以不需要重复的物品.我可以做到这一切.我需要基本的功能.

根据我的研究,他们开发了一个expando功能,但在那之前有一个解决方法吗？

更新:

我无法找到一个好的角度材料设计,但我能够找到一个角度方法.

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

Answer 1

这就是我最终使用的

指令 HTML 代码

需要一个向右和向下的箭头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>

JS：手风琴.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>'
  };
});

CSS

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