Michael Michael - 1 month ago 16
AngularJS Question

How fire event when item expanded?

I use in my angularjs project bootstrap accordion.

Here is working plunker

When I expand accordion I want to fire function in my controller named

fireOnExpand
and pass the appropriate
Id
of the group to the function.

Here is how I use accordion:

<div ng-controller="MainCtrl">
<uib-accordion>
<uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups" ng-init="isOpen = $first" is-open="isOpen">

<uib-accordion-heading>
<span ng-click="fireOnExpand()"></span>
<div class="text-center text-info">
<strong>{{group.title}}</strong>
</div>
</uib-accordion-heading>
{{group.content}} {{test}}
</uib-accordion-group>
</uib-accordion>


Here is items from controller that displayed:

$scope.groups = [
{Id: 5, title: "Dynamic-1", content: "Dynamic Group Body - 1"},
{Id: 8, title: "Dynamic-2", content: "Dynamic Group Body - 2"},
{Id: 1, title: "Dynamic-3", content: "Dynamic Group Body - 3"},
{Id: 3, title: "Dynamic-4", content: "Dynamic Group Body - 4"}];


Here the function in controller that I wont to fire on expand:

$scope.fireOnExpand = function()
{
alert("ParamPamPam");
};


For example:

If accordion item with header text "Dynamic-2" was expanded I want trigger
fireOnExpand
event handler and pass to the event appropriate Id(i.e. Id=8).

How can I fire function
fireOnExpand
and pass appropriate
Id
parameter when accordion item is expanded?

Answer

see Event Bubbling

change this

<span ng-click="fireOnExpand()"></span>
<div class="text-center text-info">
    <strong>{{group.title}}</strong>
</div>

to

<span ng-click="fireOnExpand(group.Id)"> 
     <div class="text-center text-info">
       <strong>{{group.title}}</strong>
     </div>
</span>

if you want to execute fireOnExpand on header text only, then move the ng-click to strong tag

<span> 
      <div class="text-center text-info">
           <strong ng-click="fireOnExpand(group.Id)">{{group.title}}</strong>
      </div>
</span>

Plunker