web-dev-qa-db-ja.com

angular materialを使用して折りたたみリストアイテムを展開します

表示されている展開/折りたたみビューを追加するための提案は誰にもできます ここ 。 Angular AngularJSのみでマテリアルを使用し、Bootstrapなどに依存しないようにしたいのですが、AngularMaterialドキュメントで適切なものが見つかりません。

ありがとう

javascripthtmlcssangularjsangular-material
6
Adam

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 。

11
nextt1

これはブートストラップを使用していないようです。

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

これは、素材で独自のアコーディオンを作成するための可能なコードである必要があります

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

2
Dominik Heim