web-dev-qa-db-ja.com

angle-ui-bootstrapアコーディオンの折りたたみ/展開すべて

アコーディオンのセットのすべてのボタンを折りたたみ/展開したいと思います。私はangular.jsv1.2.6とangular-bootstrap-ui0.9.0を使用しています。すべてを折りたたみ/展開する方法の例を見つけることができませんでした。私はangular初心者であり、アドバイスや提案をいただければ幸いです。

また、 この投稿 のソリューションは、私が使用している新しいバージョンのangular.js（v1.0.8とv1.2.6）では機能しないことを追加する必要があります（これはの最新バージョンです）この投稿の時間）。新しいバージョンでは、2つの分離されたスコープを作成しようとするとエラーが発生します。

マークアップ：

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

}
angularjsaccordionangular-ui-bootstrap
6
Konsuela

is-open属性を使用するメソッドを次に示します。 http://plnkr.co/edit/MliW41xGJAF0Mnw4Rgu7?p=preview

0
bekos

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

}
8
coblr