How fire event when item expanded?

1
votes

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?

2
angularjstwitter-bootstrapangular-ui-bootstrapangular-uievent-bubbling

2 Answers

1
votes

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

0
votes

  angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
  $scope.oneAtATime = true;
  $scope.lastSelected= 0;
  $scope.firstLoad =false;

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

  $scope.fireOnExpand = function(id){
    
       if ($scope.firstLoad === false){
           if (id !== $scope.lastSelected || $scope.lastSelected !== 0){
             $scope.lastSelected = id;
             alert(id);
           }
           else {
              alert("Do nothing");
           }
          
          $scope.firstLoad = true;
          
       }
       else {
          if (id !== $scope.lastSelected ){
               $scope.lastSelected = id;
               alert(id);
          }
          else {
            alert("Do nothing");
          }
          
         
       }
    
    
    
  };
   
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
  <script src="example.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

  <div ng-controller="AccordionDemoCtrl">
    <uib-accordion close-others="oneAtATime">
      <uib-accordion-group heading="{{group.title}}" ng-click="fireOnExpand($index)" ng-repeat="group in groups" is-open="$first">{{group.content}}</uib-accordion-group>
    </uib-accordion>
  </div>
</body>

</html>