How to call a function when angularjs accordion open only

Question

Hi I am using angularjs ui bootstrap accordion. Here i want to call when user click on accordion call one function and get user

Here is the code please help me thnks in advance

$scope.load_userdata= function(user_id) {
    	console.log(user_id);
    }

<uib-accordion close-others="oneAtATime">
		<div uib-accordion-group class="panel-default" ng-repeat="user in users">
		   <uib-accordion-heading ng-click="load_userdata(user.id)">
			    <div class="table">
			    	<div style="width: 50%">
			    			 @{{user.name}} 			         
			    	</div>
			    	<div>
				      Load user data
				     </div>
				   </div>
	      </uib-accordion-heading>
		</div>
</uib-accordion>

data and display it

Guillaume Georges · Accepted Answer · 2018-06-01 09:27:38Z

1

I don't really understand what the problem is. I copied your template in the snippet below and added a simple controller with a working example.

The angular-bootstrap module is not included so you don't get the proper rendering. But it shows you how to define the function in your controller for your template to work.

function ctrl($scope) {
    // dummy users data for the snippet purpose
    $scope.users = [{
            name: 'Joe',
            id: '1', 
            data : 'Married to Jane',
        },
        {
            name: 'John',
            id: '2',
            data : 'Has 3 children',
        },
        {
            name: 'Jack',
            id: '3',
            data : 'Owns a boat',
        },
        {
            name: 'Bob',
            id: '4',
            data : 'Speaks swedish',
        }
    ];

    $scope.load_userdata = function(user_id) {
        console.log("Loading user#%s data", user_id);
        
        // looking for the right user : 
        let user = $scope.users.find(x => x.id === user_id);

        // and toggling the dataLoaded property in the user object
        user.dataLoaded = true;        
    }
}

<!DOCTYPE html>
<html ng-app>
   <head>
      <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
      <meta charset=utf-8 />
      <title>Angular JS Demo</title>
   </head>
   <body ng-controller="ctrl">
      <uib-accordion close-others="oneAtATime">
         <div uib-accordion-group class="panel-default" ng-repeat="user in users">
            <uib-accordion-heading ng-click="load_userdata(user.id)">
               <div class="table">
                  <div style="width: 50%">
                     @{{user.name}} 			         
                  </div>
                  <div>
                     Load user data
                  </div>
               </div>
            </uib-accordion-heading>
            <div ng-show="user.dataLoaded">
               User's details : 
               {{user.data}} 			 
            </div>
          </div>
      </uib-accordion>

   </body>
</html>

edited Jun 1, 2018 at 9:27

answered Jun 1, 2018 at 8:25

Guillaume Georges

4,0204 gold badges17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Protozoid Over a year ago

Surely the <div ng-show="dataLoaded"> should be inside the accordion, aka a <div> inside <div uib-accordion-group>

Protozoid Over a year ago

ehmm, sorry for being annoying, but it's not right now either. The <div ng-show="dataLoaded"> should be right after this tag </uib-accordion-heading> ... I don't think you'd want a user's data displayed in the accordion heading

krishna ganisetti Over a year ago

@RogerC its what expect thank you, I think here is one issue if clicks in-side accordion<div>user data</div> it functions calls again. But i want only when clicks on header

Guillaume Georges Over a year ago

@krishnaganisetti It should be fixed now that protozoid pointed it out. I moved the user's data div out of the header.

Collectives™ on Stack Overflow

How to call a function when angularjs accordion open only

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related