gpt4 book ai didi

javascript - 当表单/窗口加载时,如何调用函数以使用 Angular Bootstrap 显示第一个选项卡的动态内容

转载 作者:行者123 更新时间:2023-11-28 07:45:59 24 4
gpt4 key购买 nike

我正在使用 angualr bootstrap 选项卡,我知道选项卡上的 ng-click 事件会在单击选项卡时触发任何功能。

我希望在表单加载时在第一个选项卡上加载一些动态内容。 HTML 是:

  <html ng-app="ui.bootstrap.testData">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title> Tabs</title>
<link href="css/en/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/en/style.css" rel="stylesheet" type="text/css" />
<link href="css/en/ng-grid.css" rel="stylesheet" type="text/css" />
<link href="css/en/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="css/en/easyui.css" rel="stylesheet" type="text/css" />
<link href="css/en/icon.css" rel="stylesheet" type="text/css" />
<link href="css/en/demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="formTabs" runat="server">
<div>
<div ng-controller="TabsDataCtrl">
<hr />
<tabset align="left">
<tab heading="Account" ng-click ="ShowAccount()">
<div id ="divAccount">
<div id ="TestAcccount" style="padding-top:30px;" align ="center">
<table id="PNRDataGrid" width="100%"></table>
</div>
</div>
</tab>
<tab heading="Policy">Policy content
<div>
<table border ="1" style ="background-color :blue"><tr><td> Test</td></tr>
</table>
</div>
</tab>
<tab heading="LoB" ng-click ="ShowLob()">LOB content
</div>
</tab>
<tab heading="Coverage">Coverage content</tab>
<tab heading="Detailed Loss">Detailed Loss</tab>
</tabset>
</div>
</div>
</form>
</body>
</html>
<script src="js/angular.js" type="text/javascript"></script>
<script src="js/ui-bootstrap-tpls-0.11.2.js" type ="text/javascript"></script>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/LossHistory.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="js/DataScrolling.js" type="text/javascript"></script>
<script src="js/jquery.easyui.min.js" type="text/javascript"></script>
<script src="js/ng-grid.js" type="text/javascript"></script>

js文件是:

 angular.module('ui.bootstrap.testData', ['ui.bootstrap']);
angular.module('ui.bootstrap.testData').controller('TabsDataCtrl', function($scope, $http) {

$scope.businessUnits = [];
$scope.lossHistory = [];

$scope.ShowAccount = function() {
$scope.loading = true;

var svcAccountURL = LHServiceDir +
'/Portal/WebServices/LossHistoryServices/LossHistoryServices.asmx/GetDetails';

....
....
}

是否有任何选项卡事件会在加载表单时触发或以任何其他方式触发 ShowAccount 函数。谢谢。

最佳答案

你可以使用像 ng-init 这样的东西

     <div ng-init="ShowAccount()">
// all your tabs here
</div>

假设 ShowAccount() 刚刚关闭,然后填充一些数据,那么一旦页面出现,这些数据就可以显示了。您也可以在 Controller 末尾调用“ShowAccount()”,它会在 Controller 加载时被调用。

关于javascript - 当表单/窗口加载时,如何调用函数以使用 Angular Bootstrap 显示第一个选项卡的动态内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27428745/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com