Angular Akkordeon: animieren Toggle

Kann jemand Rat, wie man , dass toggles mit Animation und wenn ich auf 1. Div klicken, wird nur die 1. Panel angezeigt? http://plnkr.co/edit/LdBVT0zbYdshITwr3qjh?p=preview Angular Akkordeon: animieren Toggle

Quelle

2016-05-30 kipris

<body ng-controller="Ctrl"> 
    <div ng-repeat="item in items"> 
     <div class="accordion" ng-click="show=show==true? false:true;"> 
     {{item.id}} 
     </div> 
     <div class="repeated-item" ng-model="accordionContent" ng-show="show"> 
     {{item.name}} 
     </div> 
    </div> 
    </body>

Sie brauchen keine Steuerung für diesen Zweck, kann es direkt mit Richtlinien Plunker Demo

Quelle

2016-05-30 10:39:33 etee

Können Sie Animationen hinzufügen, wenn das 2. Div angezeigt wird? Versucht, CSS hinzuzufügen, aber es hat mir nicht geholfen. – kipris

Danke für die +1 Abstimmung – etee

Versuchen Sie, dass mit ngAnimate besuchen Sie hier: https: //docs.angularjs.org/api/ngAnimate – etee

Statt neu zu erfinden das Rad, ui bootstrap ‚s accordion Direktive verwenden. Es kommt mit vielen Optionen für die Anpassung.

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function($scope) { 
 
    $scope.oneAtATime = true; 
 
    $scope.isFirstOpen = true; 
 
});

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script> 
 
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script> 
 
<script src="example.js"></script> 
 

 
<div ng-app="ui.bootstrap.demo" ng-controller="AccordionDemoCtrl"> 
 
    <uib-accordion close-others="oneAtATime"> 
 
    <uib-accordion-group heading="Static Header, initially expanded" is-open="isFirstOpen"> 
 
     This content is straight in the template. 
 
    </uib-accordion-group> 
 
    <uib-accordion-group heading="Another Static Header"> 
 
     This content is straight in the template. 
 
    </uib-accordion-group> 
 
    </uib-accordion> 
 
</div>

official plunker demo

Quelle

2016-05-30 10:37:59

Entschuldigung , aber ich habe zu viele eckige Plugins, die mit anderen kollidieren. So kann ich nicht ui Bootstrap verwenden. – kipris

hier behandelt werden soll, eine Lösung für Ihre Problem in der Regel, wenn Sie mit ng-wiederholen Sie könnten manipulieren te in Ihrem fucntions $ Indexwert Ihrer arrray

[http://plnkr.co/edit/gBJPcFNIgUTWo5gdZzUb?p=preview `] [1]

// JS

$scope.toggle = function($index) { 
    $scope.index = $index; 
};

// UND IN HTML einfache Umschaltfunktion CLASS

<div class="repeated-item" data-ng-class="{'open-accordion' : index === $index}" ng-model="accordionContent" >

Quelle

2016-05-30 10:44:44 SuperComupter

Angular Akkordeon: animieren Toggle

Antwort

Verwandte Themen