аккордеон angular-ui-bootstrap свернуть/развернуть все

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

ТАКЖЕ, я должен добавить, что решение в этот пост не не работает в более новой версии angular.js (v1.0.8 против 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'}
];

}

accordion angularjs angular-ui-bootstrap
person Konsuela    schedule 02.01.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

person bekos    schedule 03.01.2014
comment
Прохладно. Я понял в основном то же самое, используя директиву Collapse с атрибутом isCollapsed. В любом случае, это прекрасно работает. Спасибо! - person Konsuela; 04.01.2014
comment
Любой здесь может также найти эту демонстрацию, которую я только что создал для ручной настройки активной группы аккордеона. plnkr.co/edit/CD5156TaFlL365HBcyrJ?p=preview - person Blowsie; 04.02.2014
comment
Плункер в этом решении не обязательно работает так, как я интерпретирую вариант использования. Когда вы щелкаете только один заголовок, все они открываются, что не является желаемым эффектом (IMO). Только кнопка «переключить все» должна переключать их все, иначе какой смысл иметь кнопку «переключить все»? - person coblr; 07.05.2015

arrow_upward
8
arrow_downward

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

Я переместил атрибут 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;
    });
  }

}
person coblr    schedule 07.05.2015