アコーディオンのセットのすべてのボタンを折りたたみ/展開したいと思います。私は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'}
];
}
is-open
属性を使用するメソッドを次に示します。 http://plnkr.co/edit/MliW41xGJAF0Mnw4Rgu7?p=preview
私は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;
});
}
}