如何使用角度引导 UI 在加载时填充第一个选项卡的内容答案

【问题标题】：how to populate contents of first tab on load using angular bootstrap UI如何使用角度引导 UI 在加载时填充第一个选项卡的内容
【发布时间】：2014-12-10 06:22:07
【问题描述】：

我正在为标签使用 Angular ui-bootstrap。我为第一个选项卡帐户设置了 ng-click ="ShowAccount()"，我还希望在加载表单时触发相同的函数 ShowAccount()。该项目在 Asp.net 中

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()"> Account
                <div id ="divAccount">
                       <table  id="PNRDataGrid" width="100%"></table>
                               <br />
                   </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 </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>

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;
    alert('Account');
   ..
   ..


}

当用户单击“帐户”选项卡时，这可以正常工作，但我希望在加载时触发该功能像这样说： $(window).load(function() {} 在 (html) aspx 页面上。我不知道怎么做。如果我在 HTML 页面上添加

$(window).load(function() { showAccount();

}

正如预期的那样，它给出了错误，说 showAccount() 未定义。有人可以帮忙吗？如果选项卡上有一个事件在加载或其他情况下被触发。谢谢。

当我将 ng-click 替换为 select ="ShowAccount" 时，它仍然没有帮助。 bootstrap.css 的版本是 v3.0.3，ui-bootstrap-tpls 是 0.11.2.js。我是不是错过了什么。

【问题讨论】：

标签： jquery html css angularjs

【解决方案1】：

您只想将ng-click 替换为select。

select="ShowAccount()"

这是Plunker

【讨论】：