Expand collapse Liste posten mit Winkel-material

Kann jeder geben, Vorschläge für das hinzufügen von ein Erweitern/reduzieren anzeigen gezeigt hier.
Ich möchte die Winkel-material mit AngularJS und nicht nur abhängig, Bootstrap etc kann ich jedoch nicht finden nichts passendes in der AngularMaterial docs.

Dank

InformationsquelleAutor Adam | 2017-02-21

  1. 11

    Eine Möglichkeit ist die Verwendung von 2 aufeinanderfolgenden md-list-item.

    Hier ist der 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 = {};
});;

    Hier ist die Arbeit Codepen.

    Zu animieren, das ein - /ausblenden übergang, können Sie erwägen, ngAnimate. Es ist wirklich einfach wie das hinzufügen eines section-show-hide Klasse, um das versteckte element, und diesem css code: .section-show-hide { transition: all linear 0.5s; max-height: 500px; } .section-show-hide.ng-hide { opacity: 0; max-height: 0; }

    InformationsquelleAutor nextt1

  2. 1

    Scheint dies nicht die Verwendung von bootstrap.

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

    sollte dies möglich sein code zu machen, Ihre eigenen Akkordeon mit material

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

    Wissen Sie, ob es ein Beispiel, dass nur AngularMaterial? Ich bin nicht in der Lage, zusätzliche Bibliotheken, die in diesem Stadium.
    ja, das ist richtig. seine noch nicht fertig mit material. Ist das noch ein hilfreich? blog.sodhanalibrary.com/2016/02/...

    InformationsquelleAutor Dominik Heim

Schreibe einen Kommentar