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

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

我试图找到这个功能的简化版本.
我看了很多例子,看来很多都不再工作.

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

从我所研究的,他们有一个扩展功能正在开发,但直到那时有一个工作？

更新：

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

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

所以这是我最后使用的

指令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：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',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;
}

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

猜你在找的Angularjs相关文章