Может кто-нибудь посоветует, как сделать accordion, что toggles с анимацией, и если я нажму на 1-й div, отобразится только 1-я панель? http://plnkr.co/edit/LdBVT0zbYdshITwr3qjh?p=previewУгловой аккордеон: анимационный переключатель
<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
Вместо того, чтобы заново изобретать колесо, использовать accordion директива ui bootstrap «s. Он поставляется с множеством опций для настройки.
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>К сожалению , но у меня слишком много угловых плагинов, которые конфликтуют с другими. Поэтому я не могу использовать ui bootstrap. – kipris
Вот решение для вашего проблема в gennerally, когда вы работаете с ng-repeat, вы можете манипулировать т.е в вашем fucntions $ значения индекса вашего arrray
[http://plnkr.co/edit/gBJPcFNIgUTWo5gdZzUb?p=preview `] [1]
// JS
$scope.toggle = function($index) {
$scope.index = $index;
};
// И В HTML SIMPLE TOGGLE КЛАСС
<div class="repeated-item" data-ng-class="{'open-accordion' : index === $index}" ng-model="accordionContent" >
Можете ли вы добавить анимацию, когда показан второй div? Пытался добавить css, но это мне не помогло. – kipris
Спасибо за +1 голос – etee
Попробуйте использовать ngAnimate здесь: https: //docs.angularjs.org/api/ngAnimate – etee