一次扩展多个手风琴组 [英] Expand many accordion groups at once
问题描述
我在元素的分页循环中有以下手风琴(使用 angular-ui-bootstrap):
<div class="stuff_in_the_middle"><accordion id="accordion_{{$index+((currentPage-1)*20)+1}}" close-others="false"><手风琴组>[...东西...]</accordion-group><手风琴组>[...东西...]</accordion-group><手风琴组>[...东西...]</accordion-group></手风琴><span id="toggle_{{$index+((currentPage-1)*20)+1}}" onClick="openAllGroups">切换群组</span>
我想知道如何通过单击切换链接一次展开所有accordion-group
元素.可能吗?
您可以在手风琴组上创建自己的折叠指令.在此指令中,您可以将 isOpen 范围变量(由 angular-ui 创建)设置为来自父控制器和全部切换按钮的值.
此处的工作演示 (http://plnkr.co/edit/JOOZek2QBSmxIj2pXCkK?p=preview)
js
.controller('MyCtrl', ['$scope', function($scope) {$scope.opened = false;}]).directive('collapseall', [function() {返回 {限制:'A',范围: {崩溃:'='},链接:功能(范围,元素,属性){scope.$watch('collapseall', function(newval, oldval) {scope.isOpen = newval;})}}}])
html
<accordion close-others="false"><accordion-group Heading="Item 001" collapseall="opened"></accordion-group><accordion-group Heading="Item 002" collapseall="opened"></accordion-group><accordion-group Heading="Item 003" collapseall="opened"></accordion-group></手风琴><button class="btn" ng-click="opened=!opened">切换组</button>
I have the following accordion (using angular-ui-bootstrap) inside a paginated loop of elements:
<div data-ng-repeat="m in results">
<div class="stuff_in_the_middle">
<accordion id="accordion_{{$index+((currentPage-1)*20)+1}}" close-others="false">
<accordion-group>
[...stuff...]
</accordion-group>
<accordion-group>
[...stuff...]
</accordion-group>
<accordion-group>
[...stuff...]
</accordion-group>
</accordion>
<span id="toggle_{{$index+((currentPage-1)*20)+1}}" onClick="openAllGroups">Toggle groups</span>
</div>
</div>
I would like to know how to expand all accordion-group
elements at once with one click of the Toggle link. Is it possible?
You could create your own collapseall directive on the accordion-groups. In this directive you can set the isOpen scope variable (created by angular-ui) to the value from your parent controller and your toggle all button.
EDIT: working demo here (http://plnkr.co/edit/JOOZek2QBSmxIj2pXCkK?p=preview)
js
.controller('MyCtrl', ['$scope', function($scope) {
$scope.opened = false;
}])
.directive('collapseall', [function() {
return {
restrict: 'A',
scope: {
collapseall: '='
},
link: function(scope, elem, attrs) {
scope.$watch('collapseall', function(newval, oldval) {
scope.isOpen = newval;
})
}
}
}
])
html
<div>
<accordion close-others="false">
<accordion-group heading="Item 001" collapseall="opened">
</accordion-group>
<accordion-group heading="Item 002" collapseall="opened">
</accordion-group>
<accordion-group heading="Item 003" collapseall="opened">
</accordion-group>
</accordion>
<button class="btn" ng-click="opened=!opened">Toggle groups</button>
</div>
这篇关于一次扩展多个手风琴组的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!