角度手风琴：动画切换

可以有人建议怎么做accordiontoggles动画，如果我点击1st div，只有第一个面板会显示？ http://plnkr.co/edit/LdBVT0zbYdshITwr3qjh?p=preview 角度手风琴：动画切换

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>

你不需要控制器用于此目的，它可以直接使用处理指令 Plunker Demo

来源

2016-05-30 10:39:33 etee

当您显示第二个div时，您可以添加动画吗？试图添加CSS，但它并没有帮助我。 – kipris

感谢致谢+1 – etee

尝试使用ngAnimate访问此处：https：//docs.angularjs.org/api/ngAnimate – etee

而不是重新发明车轮，使用ui bootstrap的accordion指令。它有很多自定义选项。

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

来源

2016-05-30 10:37:59

对不起，但我有太多与其他人相冲突的角色插件。所以我不能使用ui bootstrap。 – kipris

这里是一个解决您的当你使用ng-repeat进行工作时，通常会遇到问题TE在类函数的arrray

[http://plnkr.co/edit/gBJPcFNIgUTWo5gdZzUb?p=preview`]的$索引值[1]

// JS

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

//，而在HTML简单的切换CLASS

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

来源

2016-05-30 10:44:44 SuperComupter

角度手风琴：动画切换

回答

相关问题