0

嗨，我正在使用 angularjs ui bootstrap 手风琴。在这里，我想在用户单击手风琴时调用一个函数并获取用户

这是代码，请提前帮助我

$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>

数据并显示

4

1 回答 1

1

我真的不明白问题是什么。我在下面的代码段中复制了您的模板，并添加了一个带有工作示例的简单控制器。

不包含 angular-bootstrap 模块，因此您无法获得正确的渲染。但它向您展示了如何在控制器中定义函数以使模板正常工作。

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>

于 2018-06-01T08:25:53.143 回答