Expand collapse list item using angular material
16,558
Solution 1
One way is to use 2 consecutive md-list-item
.
Here is the HTML Code.
<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 Code:
angular.module('myApp',['ngMaterial'])
.controller('TempController', function($scope){
$scope.data = [ "Item 1", "Item 2", "Item 3", "Item 4"]
$scope.toggle = {};
});;
Here is the working Codepen.
Solution 2
This doesn't seem to use bootstrap.
https://github.com/LukaszWatroba/v-accordion
this should be possible code to make your own accordion with material
http://blog.sodhanalibrary.com/2016/02/accordion-with-angularjs-material-ui.html#.WKxqI1UrJaQ
Comments
-
Adam almost 2 years
Can anyone give any suggestions for adding an Expand/Collapse view shown here. I'd like to use Angular material with AngularJS only and not be dependant on Bootstrap etc however I can't find anything suitable in the AngularMaterial docs.
Thanks
-
Adam about 7 yearsDo you know if there's and example that uses just AngularMaterial? I'm not able to add extra libraries at this stage.
-
Dominik Heim about 7 yearsyeah, thats right. its not done with material. Is this one more helpful? blog.sodhanalibrary.com/2016/02/…
-
Wiil over 6 yearsTo animate the Expand/Collapse transition, you may consider using ngAnimate. It's really simple as adding a
section-show-hide
class to the hidden element, and this css code:.section-show-hide { transition: all linear 0.5s; max-height: 500px; } .section-show-hide.ng-hide { opacity: 0; max-height: 0; }