Açısal malzemeyi kullanarak daraltma listesi öğesini genişletin

Question

Herhangi biri, Genişlet/Daralt görünümü eklemek için herhangi bir öneride bulunabilir here. Sadece AngularJS ile Açısal malzeme kullanmak istiyorum ve Bootstrap vb. Bağımlı olmamak ancak AngularMaterial belgelerinde uygun bir şey bulamıyorum.

Teşekkürler

Answer 1

Bu, önyükleme kullanmıyor gibi görünüyor.

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

bu 2 ardışık md-list-item kullanmak

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

Answer 2

bir yolu olduğunu materyal ile kendi akordeon yapmak mümkün kodu olmalıdır.

İşte HTML Kodu.

<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 Kod: Burada

angular.module('myApp',['ngMaterial']) 
.controller('TempController', function($scope){ 
$scope.data = [ "Item 1", "Item 2", "Item 3", "Item 4"] 
$scope.toggle = {}; 
});; 

çalışma Codepen olduğunu.