如何使用 angular 和 UI 引导程序将动态内容添加到选项卡集 [英] How to add dynamic contents to tab set using angular and UI bootstrap

问题描述

angular 和 ui 引导程序非常新.我有一个标签集如下:

<meta http-equiv="X-UA-Compatible" content="IE=edge"/><标题>标签<link href="css/bootstrap.css" rel="样式表"><身体><form id="formTabs" runat="server"><div><div ng-controller="TabsDemoCtrl"><小时/><tabset align="left"><tab header="Account">账户内容</tab><tab header="Policy">政策内容</tab><tab header="LoB">LOB 内容</tab><tab header="Coverage">Coverage content</tab><tab header="详细损失">详细损失</tab></tabset>

</表单>

javascript 为:

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope) {});

现在我想增强上面的例子，让 Tab 的内容是动态的.我需要通过调用 Web 服务来获取数据.假设当我单击帐户"选项卡时，将调用函数 LoadProducts 并加载数据.

我将更改 javascript 以包含函数 LoadProducts，如下所示:

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope) {$scope.LoadProducts = function() {$scope.loading = true;var PnrUrlLoadProducts = PNRfolder +'/Portal/WebServices/PNRServices.asmx/getPNRProducts';$http({方法:'POST'，//url: '/Portal/WebServices/PNRServices.asmx/getPNRProducts',网址:PnrUrlLoadProducts，数据:{'businessUnit':$scope.businessUnit.desc}，标头:{'内容类型':'应用程序/json;charset=utf-8', 'dataType': 'json' },缓存:$templateCache}).成功(功能(数据，状态，标题，配置){......}).

现在我不知道如何通过单击帐户"选项卡来调用 Loadproducts.拜托，有人可以帮忙吗?

我更改了代码以包含 ng-click 的功能.这不起作用.请参阅以下内容:

<头><meta http-equiv="X-UA-Compatible" content="IE=edge"/><标题>标签<link href="css/bootstrap.css" rel="stylesheet"/><身体><form id="formTabs" runat="server"><div><div ng-controller="TabsDemoCtrl"><小时/><tabset align="left"><tab header="Account" ng-click ="ShowTest">Account content</tab><tab header="Policy">政策内容</tab><tab header="LoB">LOB 内容</tab><tab header="Coverage">Coverage content</tab><tab header="详细损失">详细损失</tab></tabset>

</表单></html>

javascript:

 angular.module('ui.bootstrap.demo', ['ui.bootstrap']);angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope) {$scope.ShowTest = function() {$scope.loading = true;警报(在帐户中")；}

});

当我单击帐户"选项卡时没有任何反应.它仍然显示静态文本.

******** 重新访问我的代码 ****************我确实更改了我的代码，如下所示，但仍然在单击帐户选项卡时未调用函数 ShowTest.

HTML 是:

 <头><meta http-equiv="X-UA-Compatible" content="IE=edge"/><标题>标签<link href="css/bs/bootstrap.css" rel="stylesheet"/><style type="text/css" >.SpanStyle{文本对齐:居中；颜色:蓝色；}</风格><身体><form id="formTabs" runat="server"><div><div ng-controller="TabsDataCtrl"><小时/><tabset align="left"><tab header="Account" ng-click ="ShowTest">账户内容<div id ="TestAcccount"><span class="SpanStyle">测试</span></div></tab><tab header="Policy">政策内容</tab><tab header="LoB">LOB 内容</tab><tab header="Coverage">Coverage content</tab><tab header="详细损失">详细损失</tab></tabset>