angular-ui-bootstrap-Akkordeon-collapse/expand all

Ich würde gern ein collpase/Schaltfläche alles erweitern klicken, für eine Reihe von Akkordeons. Ich bin mit angular.js v1.2.6 und eckig-bootstrap-ui 0.9.0. Ich habe nicht in der Lage zu finden, ein Beispiel, wie eine nicht collpase/alle erweitern. Ich bin eine eckige Anfänger und jede Beratung oder Anregungen wird sehr geschätzt.

Ich sollte AUCH hinzufügen, dass die Lösung in dieser Beitrag funktioniert nicht in der neueren version von angular.js (v1.0.8 vs-v1.2.6) dass ich mit (das ist die neueste version zum Zeitpunkt dieses Postings). In der neueren version wirft es ein Fehler zu versuchen, um zwei isolierte Bereiche.

Markup:

    <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'}
];

}

InformationsquelleAutor Konsuela | 2014-01-02

  1. 0

    Hier ist eine Methode, mit der is-open Attribut.
    http://plnkr.co/edit/MliW41xGJAF0Mnw4Rgu7?p=preview

    Cool. Ich habe herausgefunden, im Grunde die gleiche Sache, die mit dem Zusammenbruch der Richtlinie mit der isCollapsed Attribut. Jede Weise, diese funktioniert Super. Danke!
    Jemand hier vielleicht auch fest, das demo, das ich erstellt habe für die manuelle Einstellung ein aktiver Akkordeon-Gruppe. plnkr.co/Bearbeiten/CD5156TaFlL365HBcyrJ?p=Album Vorhören
    Die plunker in dieser Lösung nicht unbedingt so, wie ich es bin, die Interpretation der use-case. Wenn Sie auf nur einem einzigen header, die Sie alle wechseln öffnen, die nicht den gewünschten Effekt (IMO). Nur die 'toggle all' button wechseln Sie alle, sonst was ist der Punkt, der mit der toggle-Taste alle?

    InformationsquelleAutor bekos

  2. 8

    Habe ich Blowsie ist plunkr Kommentar und baute meine eigene Antwort, die löst den use-case, dass ich das Lesen in hier.

    Habe ich verschoben, die in der Nähe-andere-Attribut, um das Akkordeon-element, wo die docs sagen es geht. Ich habe auch Hinzugefügt zusätzliche Schaltflächen openAll, closeAll oder toggleAll.

    Wenn Sie auf die überschrift klicken für ein einzelnes Element nur das Element öffnet. Wenn Sie auf 'Alle' klicken, alle sind betroffen.

    Dank Blowsie für die inspiration. Ich denke, mit dem posten.öffnen Sie hier die war das ticket. Nach, dass, es ist nur eine Frage der Auswirkungen auf alle Artikel.offene Werte.

    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;
    });
  }

}

    InformationsquelleAutor coblr

Schreibe einen Kommentar