angular-ui-bootstrap折叠/全部展开

Question

我想为一组手风琴创建一个collpase/expand all按钮。我使用的是angular.js v1.2.6和angular-bootstrap-UI0.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

我采纳了Blowsie的评论，并构建了我自己的答案，解决了我在这里阅读的用例。

我已经将close-other属性移到了文档所说的accordion元素中。我还为openAll、closeAll或toggleAll添加了额外的按钮。

如果单击单个项目的标题，则只打开该项目。如果你点击一个“全部”按钮，所有的都会受到影响。

感谢布洛西给我的灵感。我认为在这里使用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;
    });
  }

}