angular-ui-bootstrap accordion collapse/expand all

Question

Я хотел бы создать кнопку collpase/expand all для набора аккордеонов. Я использую angular.js v1.2.6 и angular-bootstrap-ui 0.9.0. Я не смог найти пример того, как сделать collpase/expand all. Я - угловатый новичок, и любые советы или предложения приветствуются.

Я также должен добавить, что решение в this post не работает в новой версии angular.js (v1.0.8 vs v1.2.6), которую я использую (которая является последней версией на момент этого проводка). В новой версии он вызывает ошибку при попытке создать две изолированные области.

разметки:

<div ng-controller="myCtlr"> 

    <accordion close-others="oneAtATime"> 

    <button class="btn" ng-click="section.isCollapsed = !section.isCollapsed">Toggle Sections</button> 

     <accordion-group ng-repeat="section in sections" is-open="section.isOpen"> 
     <accordion-heading> 
     <div class="accordion-heading-content" ng:class="{collapsed: section.isOpen}"> 
      {{section.name}} 
     </div> 
     </accordion-heading> 
     Section content 
     </accordion-group> 

    </accordion> 

    </div> 

JS:

var theapp = angular.module('myApp', [ 
    'ui.bootstrap' 
]) 

function myCtlr ($scope) { 
$scope.isCollapsed = false; 
$scope.sections = [ 
    {'id': '353','otherid': '7','name': 'One','Sequence': '1'}, 
    {'id': '354','otherid': '8','name': 'Two','Sequence': '1'}, 
    {'id': '355','otherid': '9','name': 'Three','Sequence': '1'} 
]; 

} 

Answer 1

Вот метод, используя атрибут is-open. http://plnkr.co/edit/MliW41xGJAF0Mnw4Rgu7?p=preview

Answer 2

Я принял комментарий Plunkr от Blowsie и построил свой собственный ответ, который разрешает использование, которое я читаю здесь.

Я переместил атрибут close-others в элемент аккордеона, где говорят документы. Я также добавил дополнительные кнопки для openAll, closeAll или toggleAll.

Если вы нажмете заголовок для одного элемента, откроется только этот элемент. Если вы нажмете кнопку «Все», все будет затронуто.

Благодаря Blowsie для вдохновения. Я думаю, что использование item.open здесь было билетом. После этого это просто влияет на все значения item.open.

http://plnkr.co/edit/WUKEfcBrSf3XrIQAik67?p=preview

HTML

<div ng-controller="AccordionDemoCtrl"> 

    <accordion close-others="false"> 
    <accordion-group ng-repeat="item in items" is-open="item.open" heading="{{item.name}}"> 
     {{item.open}} 
     <p>The body of the accordion group grows to fit the contents</p> 
    </accordion-group> 
    </accordion> 

    <button ng-click="openItem(0)">Open 1</button> 
    <button ng-click="openItem(1)">Open 2</button> 
    <button ng-click="openItem(2)">Open 3</button> 
    <button ng-click="openAllItems()">Open All</button> 
    <button ng-click="closeAllItems()">Close All</button> 
    <button ng-click="toggleAllItems()">Toggle All</button> 
    <br/> 

{{items |json}} 
</div> 

JS

angular.module('plunker', ['ui.bootstrap']); 
function AccordionDemoCtrl($scope) { 
    $scope.oneAtATime = true; 

    $scope.items = [ 
    {name: 'Item 1', open: false}, 
    {name: 'Item 2', open: false}, 
    {name: 'Item 3', open: false} 
    ]; 

    $scope.addItem = function() { 
    var newItemNo = $scope.items.length + 1; 
    $scope.items.push('Item ' + newItemNo); 
    }; 


    $scope.openItem = function(idx) { 
    console.log(idx); 
    $scope.items[idx].open = true; 
    }; 

    $scope.openAllItems = function(){ 
    $scope.items.map(function(item){ 
     item.open = true; 
    }); 
    }; 

    $scope.closeAllItems = function(){ 
    $scope.items.map(function(item){ 
     item.open = false; 
    }); 
    } 

    $scope.toggleAllItems = function(){ 
    $scope.items.map(function(item){ 
     item.open = !item.open; 
    }); 
    } 

}