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

Question

任何人都可以给出有关添加展开/折叠视图here的任何建议。 我想只使用AngularJS和AngularJS，而不是依赖于Bootstrap等，但我找不到任何适合AngularMaterial文档的东西。

谢谢

Answer 1

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

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

这应该是可能的代码，以使自己的手风琴与材料

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

Answer 2

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