使用Angular Material展开和折叠列表项

Question

使用Angular Material展开和折叠列表项

javascripthtmlcssangularjsangular-material

6

有人能给出如何添加展开/折叠视图的建议吗？参见这里。我想只使用AngularJS的Angular Material，而不依赖于Bootstrap等库。然而在AngularMaterial文档中找不到合适的内容。

谢谢

- Adam

2个回答

2

这似乎没有使用Bootstrap。

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

这应该是使用 Material 可以制作自己的手风琴代码。

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

- Dominik Heim

你知道是否有一个只使用AngularMaterial的示例吗？我现在无法添加额外的库。 - Adam

是的，没错。这不是用材料完成的。这个链接是否更有帮助？http://blog.sodhanalibrary.com/2016/02/accordion-with-angularjs-material-ui.html#.WKxqI1UrJaQ - Dominik Heim

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nextt1 · Accepted Answer

一种方法是使用连续的 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。