私がこのコードを持っている場合：
<accordion-group heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</accordion-group>
AngularJS、angular-ui、Twitter Bootstrapを使用して、アコーディオンを開いたときに何らかのアクションを呼び出すことはできますか？ng-clickグループを開いたり折りたたんだりするためにHTMLに「コンパイル」された後、すでに使用されているため、単純に追加することはできません。
アコーディオングループでは、属性として提供する代わりに、アコーディオン見出しディレクティブを使用することもできます。これを使用して、ng-clickでヘッダーを別のタグでラップできます。
<accordion-group ng-repeat="group in groups" heading="{{group.title}}" is-open="group.open">
<accordion-heading>
<span ng-click="opened(group, $index)">{{group.content}}</span>
</accordion-heading>
</accordion-group>
例： http： //plnkr.co/edit/B3LC1X？p = Preview
これがpkozlowski.opensourceソリューションに基づくソリューションです。コレクションの各アイテムに$watch
を追加する代わりに、動的に定義されたプロパティを使用できます。ここで、グループのIsOpenedプロパティをis -open属性にバインドできます。
<accordion-group ng-repeat="group in groups" heading="{{group.title}}" is-open="group.IsOpened">
{{group.content}}
</accordion-group>
したがって、コントローラーのコレクションの各アイテムにIsOpenedプロパティを動的に追加できます。
$scope.groups.forEach(function(item) {
var isOpened = false;
Object.defineProperty(item, "IsOpened", {
get: function() {
return isOpened;
},
set: function(newValue) {
isOpened = newValue;
if (isOpened) {
console.log(item); // do something...
}
}
});
});
パフォーマンスには、時計の代わりにプロパティを使用する方が適しています。
is-openアコーディオングループには、バインド可能な式を指す属性があります。特定のアコーディオングループが開いているときに、この式を監視してロジックを実行できます。この手法を使用すると、マークアップを次のように変更できます。
<accordion-group ng-repeat="group in groups" heading="{{group.title}}" is-open="group.open">
{{group.content}}
</accordion-group>
これにより、コントローラーで目的のウォッチ式を準備できます。
$scope.$watch('groups[0].open', function(isOpen){
if (isOpen) {
console.log('First group was opened');
}
});
上記は機能しますが、実際に使用するのは少し面倒かもしれません。そのため、これを改善できると思われる場合は、https：//github.com/angular-ui/bootstrapで問題を開いてください。
これは、どのアコーディオン要素が開いているかを簡単に追跡するkjvの答えに触発されたソリューションです。ng-clickアコーディオンの見出しを操作するのは難しいと思いましたが、要素を<span>タグで囲み、それにng-clickを追加するとうまくいきました。
私が遭遇したもう1つの問題は、accordion要素がプログラムでページに追加されたにもかかわらず、コンテンツが追加されなかったことです。変数に{{path}}リンクされたAngularディレクティブ（つまり）を使用してコンテンツをロードしようとすると、ヒットするため、内部に埋め込まれたIDを使用してアコーディオンコンテンツにデータを入力する次のメソッドを使用します。$scopeundefineddiv
コントローラ：
//initialise the open state to false
$scope.routeDescriptors[index].openState == false
function opened(index)
{
//we need to track what state the accordion is in
if ($scope.routeDescriptors[index].openState == true){ //close an accordion
$scope.routeDescriptors[index].openState == false
} else { //open an accordion
//if the user clicks on another accordion element
//then the open element will be closed, so this will handle it
if (typeof $scope.previousAccordionIndex !== 'undefined') {
$scope.routeDescriptors[$scope.previousAccordionIndex].openState = false;
}
$scope.previousAccordionIndex = index;
$scope.routeDescriptors[index].openState = true;
}
function populateDiv(id)
{
for (var x = 0; x < $scope.routeDescriptors.length; x++)
{
$("#_x" + x).html($scope.routeDescriptors[x]);
}
}
HTML：
<div ng-hide="hideDescriptions" class="ng-hide" id="accordionrouteinfo" ng-click="populateDiv()">
<accordion>
<accordion-group ng-repeat="path in routeDescriptors track by $index">
<accordion-heading>
<span ng-click="opened($index)">route {{$index}}</span>
</accordion-heading>
<!-- Notice these divs are given an ID which corresponds to it's index-->
<div id="_x{{$index}}"></div>
</accordion-group>
</accordion>
</div>
連想配列を使用して、開いた状態とモデルオブジェクトの間に関係を作成しました。
HTMLは次のとおりです。
<div ng-controller="CaseController as controller">
<accordion close-others="controller.model.closeOthers">
<accordion-group ng-repeat="topic in controller.model.topics track by topic.id" is-open="controller.model.opened[topic.id]">
<accordion-heading>
<h4 class="panel-title clearfix" ng-click="controller.expand(topic)">
<span class="pull-left">{{topic.title}}</span>
<span class="pull-right">Updated: {{topic.updatedDate}}</span>
</h4>
</accordion-heading>
<div class="panel-body">
<div class="btn-group margin-top-10">
<button type="button" class="btn btn-default" ng-click="controller.createComment(topic)">Add Comment<i class="fa fa-plus"></i></button>
</div>
<div class="btn-group margin-top-10">
<button type="button" class="btn btn-default" ng-click="controller.editTopic(topic)">Edit Topic<i class="fa fa-pencil-square-o"></i></button>
</div>
<h4>Topic Description</h4>
<p><strong>{{topic.description}}</strong></p>
<ul class="list-group">
<li class="list-group-item" ng-repeat="comment in topic.comments track by comment.id">
<h5>Comment by: {{comment.author}}<span class="pull-right">Updated: <span class="commentDate">{{comment.updatedDate}}</span> | <span class="commentTime">{{comment.updatedTime}}</span></span></h5>
<p>{{comment.comment}}</p>
<div class="btn-group">
<button type="button" class="btn btn-default btn-xs" ng-click="controller.editComment(topic, comment)">Edit <i class="fa fa-pencil-square-o"></i></button>
<button type="button" class="btn btn-default btn-xs" ng-click="controller.deleteComment(comment)">Delete <i class="fa fa-trash-o"></i></button>
</div>
</li>
</ul>
</div>
</accordion-group>
</accordion>
コントローラスニペットは次のとおりです。
self.model = {
closeOthers : false,
opened : new Array(),
topics : undefined
};
「トピック」はAJAX呼び出しで入力されます。サーバーから更新されたモデルオブジェクトから「開いた」状態を分離することは、更新後も状態が保持されることを意味します。
また、コントローラーを宣言しますng-controller="CaseController as controller"
アコーディオン-controller.js
MyApp.Controllers
.controller('AccordionCtrl', ['$scope', function ($scope) {
$scope.groups = [
{
title: "Dynamic Group Header - 1",
content: "Dynamic Group Body - 1",
open: false
},
{
title: "Dynamic Group Header - 2",
content: "Dynamic Group Body - 2",
open: false
},
{
title: "Dynamic Group Header - 3",
content: "Dynamic Group Body - 3",
open: false
}
];
/**
* Open panel method
* @param idx {Number} - Array index
*/
$scope.openPanel = function (idx) {
if (!$scope.groups[idx].open) {
console.log("Opened group with idx: " + idx);
$scope.groups[idx].open = true;
}
};
/**
* Close panel method
* @param idx {Number} - Array index
*/
$scope.closePanel = function (idx) {
if ($scope.groups[idx].open) {
console.log("Closed group with idx: " + idx);
$scope.groups[idx].open = false;
}
};
}]);
index.html
<div ng-controller="AccordionCtrl">
<accordion>
<accordion-group ng-repeat="group in groups" is-open="group.open">
<button ng-click="closePanel($index)">Close me</button>
{{group.content}}
</accordion-group>
<button ng-click="openPanel(0)">Set 1</button>
<button ng-click="openPanel(1)">Set 2</button>
<button ng-click="openPanel(2)">Set 3</button>
</accordion>
</div>
Angularディレクティブを使用して実行できます。
<div uib-accordion-group is-open="property.display_detail" ng-repeat="property in properties">
<div uib-accordion-heading ng-click="property.display_detail = ! property.display_detail">
some heading text
</div>
<!-- here is the accordion body -->
<div ng-init="i=$index"> <!-- I keep track of the index of ng-repeat -->
<!-- and I call a custom directive -->
<mydirective mydirective_model="properties" mydirective_index="{% verbatim ng %}{{ i }}{% endverbatim ng %}">
here is the body
</mydirective>
</div>
</div>
app.directive("mydirective", function() {
return {
restrict: "EAC",
link: function(scope, element, attrs) {
/* note that ng converts everything to camelCase */
var model = attrs["mydirectiveModel"];
var index = attrs["mydirectiveIndex"];
var watched_name = model + "[" + index + "].display_detail"
scope.$watch(watched_name, function(is_displayed) {
if (is_displayed) {
alert("you opened something");
}
else {
alert("you closed something");
}
});
}
}
});
そこでのセットアップにはいくつかの特異性があります（私はDjangoを使用しているため、「{％verbatim％}」タグを使用しています）が、このメソッドは機能するはずです。