角度素材を使用して折りたたみリストアイテムを展開する

Question

拡大/折りたたみビューを追加するための提案は誰でもhereと表示できます。 私はAngularJSだけAngular素材を使用したいと思いますが、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です。