如何在窗体/窗口加载时使用角度引导程序调用函数以显示第一个选项卡的动态内容
How to call the function to display dynamic contents of first tab using angular bootstrap when the form / window loads
我正在使用angualr引导选项卡,我知道选项卡上的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(( 刚刚关闭然后填充一些数据,那么一旦页面出现,这些数据就可以显示。您也可以在控制器末尾调用"ShowAccount((",它将在控制器加载时调用。
您可以在其中一个控制器中调用angular.element(document).ready(function(){ ... })
:
代码片段:
angular.element(document).ready(function () {
console.log('In Angular Element Ready');
myInitFunction();
});
这在Chrome中对我有用,尽管我在Firefox中看到过问题。
相关文章:
- 而循环只设置php中输入字段中的第一个值
- dataTables-如何自定义分页类型以显示最后一个页码后面的省略号,
- 错误:$injector:modulerr模块错误(我的第一个SPA应用程序)
- bootstrap消除模态并显示另一个模态
- IE11中的第二个调用取消了第一个Fetch API调用
- Javascript XMLHttpRequest——只有第一个POST请求有效
- 根据前两个下拉ID显示第三个下拉列表
- 使用javascript或angularjs特定过滤器搜索字符串中第一个img标记的json值
- json结果显示第一个值
- NodeJS应用程序只显示第一个JSON对象.为什么?
- jquery-select2显示默认选择的第一个值
- 角度下拉列表不显示第一个值
- html嵌套表通过单击表行第一个td来隐藏或显示表行
- 如何检查多维数组中是否存在字符串,然后显示数组中找到该字符串的第一个项
- 使用if计算基于年龄的点数.Else语句中,脚本只显示第一个值
- PHP变量正在更新,但javascript函数总是显示第一个值
- 渐明,淡出DIV上循环工作良好-但不显示第一个DIV
- jQuery AJAX在第一个PHP条件之后不显示输出
- 如何始终显示第一个 TAB
- 如果按下按钮,显示从json中获得的第一个X元素