javascript - 仅当 angularjs Accordion 打开时如何调用函数

标签 javascript angularjs bootstrap-accordion angularjs-bootstrap

嗨,我正在使用 angularjs ui bootstrap Accordion 。在这里,当用户单击 Accordion 时,我想调用一个函数并获取用户

这是代码,请提前帮助我

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

数据并显示

最佳答案

我真的不明白问题出在哪里。我在下面的代码片段中复制了您的模板,并添加了一个简单的 Controller 和一个工作示例。

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

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>

关于javascript - 仅当 angularjs Accordion 打开时如何调用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50638450/

相关文章:

unit-testing - angular-mock.js 与 htmlunit 冲突吗?如何在 maven-jasmine 中使用 angular-mock.js 测试 Angular 应用程序

javascript - 隐藏水平滚动条但使数据水平滚动

javascript - 使用 Bootstrap 展开全部和折叠所有按钮

asp.net-core - Bootstrap Accordion 3.3.7 在 foreach 循环内崩溃 asp.net core 1.1 无法正常工作

javascript - Bootstrap Accordion - 页面先跳到底部然后转到顶部问题

javascript - TypeScript 中函数类型的参数数量错误

Javascript 在知道字符串是什么时返回 "undefined"

javascript - innerHTML 中的 href

css - Angularstrap Modal 隐藏垂直浏览器滚动条

javascript - WebView 变白/空白