Question

有人可以建议如何accordion toggles动画，如果我点击第一个div，只会显示第一个面板吗？ http://plnkr.co/edit/LdBVT0zbYdshITwr3qjh?p=preview

Answer 1

  <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

Answer 2

使用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

Answer 3

这是一个解决你的问题的方法，当你使用ng-repeat你可以操作你的你的arrray的$ index值

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

// JS

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

//和HTML简单的翻转课程

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

角度手风琴：动画切换

3 个答案: