可以有人建議怎麼做accordion
toggles
動畫,如果我點擊1st div,只有第一個面板會顯示? http://plnkr.co/edit/LdBVT0zbYdshITwr3qjh?p=preview角度手風琴:動畫切換
0
A
回答
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
0
而不是重新發明車輪,使用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>
+0
對不起,但我有太多與其他人相沖突的角色插件。所以我不能使用ui bootstrap。 – kipris
0
這裏是一個解決您的當你使用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" >
相關問題
- 1. 純CSS手風琴切換
- 2. jquery切換手風琴
- 3. 手風琴+切換菜單
- 4. 切換哈姆手風琴
- 5. 用JQuery切換手風琴
- 6. 切換手風琴班使用角度js
- 7. Javascript手風琴動畫
- 8. 手風琴動畫jquery
- 9. 手風琴角2
- 10. Android手風琴/手風琴/摺疊動畫
- 11. JQuery UI手風琴 - 嵌套式手風琴不是動畫
- 12. 角度手風琴沒有關閉
- 13. Bootstrap手風琴切換開關
- 14. jquery手風琴切換的正負號
- 15. jQuery的手風琴點擊切換類
- 16. Bootstrap手風琴切換邏輯
- 17. 如何使jQuery UI手風琴切換
- 18. 簡單的jQuery手風琴切換
- 19. jquery切換無線手風琴
- 20. Jquery手風琴按鈕切換
- 21. Jquery動畫寬度手風琴風格橫幅
- 22. jQuery手風琴菜單動畫擺動
- 23. 切換到最大寬度的手風琴
- 24. ExtJS的:禁止手風琴動畫
- 25. jQuery的動畫手風琴頭
- 26. jQuery UI手風琴 - 動畫無效
- 27. 創建手風琴手動
- 28. Bootstrap Angular動態長度手風琴
- 29. 手風琴的自動寬度
- 30. 手風琴內手風琴摺疊父母手風琴
當您顯示第二個div時,您可以添加動畫嗎?試圖添加CSS,但它並沒有幫助我。 – kipris
感謝致謝+1 – etee
嘗試使用ngAnimate訪問此處:https://docs.angularjs.org/api/ngAnimate – etee