使用角度材料展开折叠列表项

Posted 2023-03-06

【中文标题】使用角度材料展开折叠列表项

【英文标题】：Expand collapse list item using angular material

【发布时间】：2017-07-11 08:31:18

【问题描述】：

任何人都可以就添加显示here 的展开/折叠视图提供任何建议。 我只想将 Angular 材料与 AngularJS 一起使用，而不是依赖于 Bootstrap 等，但是我在 AngularMaterial 文档中找不到任何合适的东西。

谢谢

【参考方案1】：

一种方法是使用 2 个连续的md-list-item。

这是 html 代码。

  <md-list flex>
   <md-list-item ng-click="toggle.list1 = !toggle.list1">
    <md-icon>explore</md-icon>
    <span flex>Item List 1</span>
    <md-icon ng-show="!toggle.list1">expand_more</md-icon>
    <md-icon ng-show="toggle.list1">expand_less</md-icon>
   </md-list-item>
   <md-list-item ng-repeat="item in data" ng-show="toggle.list1">
   <span flex-offset="5">item</span>
  </md-list-item>
  <md-list-item ng-click="toggle.list2 = !toggle.list2">
   <md-icon>explore</md-icon>
   <span flex>Item List 2</span>
   <md-icon ng-show="!toggle.list2">expand_more</md-icon>
   <md-icon ng-show="toggle.list2">expand_less</md-icon>
  </md-list-item>
  <md-list-item ng-repeat="item in data" ng-show="toggle.list2">
   <span flex-offset="5">item</span>
  </md-list-item>
 </md-list>

JS代码：

angular.module('myApp',['ngMaterial'])
.controller('TempController', function($scope)
 $scope.data = [ "Item 1", "Item 2", "Item 3", "Item 4"]
 $scope.toggle = ;
);;

这是工作的Codepen。

【讨论】：

要为展开/折叠过渡设置动画，您可以考虑使用ngAnimate。在隐藏元素中添加section-show-hide 类真的很简单，这个css代码：.section-show-hide transition: all linear 0.5s; max-height: 500px; .section-show-hide.ng-hide opacity: 0; max-height: 0;

【参考方案2】：

这似乎没有使用引导程序。

https://github.com/LukaszWatroba/v-accordion

这应该是用材料制作自己的手风琴的可能代码

http://blog.sodhanalibrary.com/2016/02/accordion-with-angularjs-material-ui.html#.WKxqI1UrJaQ

【讨论】：

您知道是否有仅使用 AngularMaterial 的示例吗？在这个阶段我无法添加额外的库。

是的，没错。它不是用材料完成的。这个更有帮助吗？ blog.sodhanalibrary.com/2016/02/…