如何使用角度和 UI 引导向选项卡集添加动态内容
Posted
技术标签:
【中文标题】如何使用角度和 UI 引导向选项卡集添加动态内容【英文标题】：How to add dynamic contents to tab set using angular and UI bootstrap 【发布时间】：2015-01-07 03:36:45 【问题描述】：Angular 和 ui 引导程序非常新。我有一个标签集如下：
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title> Tabs</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form id="formTabs" runat="server">
<div>
<div ng-controller="TabsDemoCtrl">
<hr />
<tabset align="left">
<tab heading="Account">Account content</tab>
<tab heading="Policy">Policy content</tab>
<tab heading="LoB">LOB content</tab>
<tab heading="Coverage">Coverage content</tab>
<tab heading="Detailed Loss">Detailed Loss</tab>
</tabset>
</div>
</div>
</form>
javascript 为：
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope)
);
现在我想增强上面的例子，使 Tab 的内容是动态的。我需要通过调用 Web 服务来获取数据。比如说当我点击 Account Tab 时，会调用函数 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(
method: 'POST',
//url: '/Portal/WebServices/PNRServices.asmx/getPNRProducts',
url: PnrUrlLoadProducts,
data: 'businessUnit': $scope.businessUnit.desc ,
headers: 'Content-Type': 'application/json; charset=utf-8', 'dataType': 'json' ,
cache: $templateCache
).
success(function(data, status, headers, config)
...
...
).
现在我不知道如何在单击“帐户”选项卡时调用 Loadproducts。请问，有人可以帮忙吗？
我更改了代码以包含关于 ng-click 的功能。这不起作用。请看下面：
<html ng-app="ui.bootstrap.demo">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title> Tabs</title>
<link href="css/bootstrap.css" rel="stylesheet"/>
</head>
<body>
<form id="formTabs" runat="server">
<div>
<div ng-controller="TabsDemoCtrl">
<hr />
<tabset align="left">
<tab heading="Account" ng-click ="ShowTest">Account content</tab>
<tab heading="Policy">Policy content</tab>
<tab heading="LoB">LOB content</tab>
<tab heading="Coverage">Coverage content</tab>
<tab heading="Detailed Loss">Detailed Loss</tab>
</tabset>
</div>
</div>
</form>
</body>
</html>
javascript：
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope)
$scope.ShowTest = function()
$scope.loading = true;
alert("in accounts");
);
单击“帐户”选项卡时没有任何反应。它仍然显示静态文本。
************ 重新访问了我的代码 *************** 我确实更改了我的代码，如下所示，但仍然在单击帐户选项卡时，未调用函数 ShowTest。
HTML 是：
<html ng-app="ui.bootstrap.testData">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title> Tabs</title>
<link href="css/bs/bootstrap.css" rel="stylesheet"/>
<style type ="text/css" >
.SpanStyle
text-align: center;
color:blue;
</style>
</head>
<body>
<form id="formTabs" runat="server">
<div>
<div ng-controller="TabsDataCtrl">
<hr />
<tabset align="left">
<tab heading="Account" ng-click ="ShowTest">Account content
<div id ="TestAcccount"> <span class="SpanStyle">Test</span></div>
</tab>
<tab heading="Policy">Policy content</tab>
<tab heading="LoB">LOB content</tab>
<tab heading="Coverage">Coverage content</tab>
<tab heading="Detailed Loss">Detailed Loss</tab>
</tabset>
</div>
</div>
</form>
</body>
</html>
<script src="jsNew/angular.js" type ="text/javascript"></script>
<script type ="text/javascript" >
$(window).load(function()
$("#TestAcccount").hide();
);
</script>
javascript如下：
angular.module('ui.bootstrap.testData', ['ui.bootstrap']);
angular.module('ui.bootstrap.testData').controller('TabsDataCtrl', function($scope)
alert("module");
$scope.ShowTest = function()
alert("scope");
$scope.loading = true;
var PnrUrlBU = PNRfolder + '/Portal/WebServices/PNRServices.asmx/getPNRBusinessUnits';
$http(
method: 'POST',
//url: '/Portal/WebServices/PNRServices.asmx/getPNRBusinessUnits',
url: PnrUrlBU,
data: ,
headers: 'Content-Type': 'application/json; charset=uf-8', 'dataType': 'json'
).
success(function(data, status, headers, config)
$scope.loading = false;
//$scope.businessUnits = data.d;
//$("#ddBusinessUnits").removeAttr("disabled");
// $scope.GetPNRHistory();
$("#TestAcccount span.SpanStyle").text("The business unit:" + data.d);
$scope("#TestAcccount").show();
).
error(function(data, status)
$scope.loading = false;
alert("Request Failed GetBusinessUnits");
);
);
显示第一个警报“模块”，但不显示第二个警报“范围”。这意味着函数 ShowTest 永远不会被触发。
【问题讨论】：
您需要更多帮助吗？ 【参考方案1】：您将 jQuery 和 Angular 混合在一起，导致您遇到问题。 Angular 有另一种显示和隐藏的方式，你应该始终使用它。我已经玩过你的 Plunkr，但你现在需要测试它，因为 $http 调用需要一个完整的 URL 才能发布到，但我能够让错误警报正常工作，所以在适当的情况下也应该触发成功
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(
method: 'POST', // probably should be a GET
url: PnrUrlLoadProducts,
data: 'businessUnit': $scope.businessUnit.desc ,
headers: 'Content-Type': 'application/json; charset=utf-8', 'dataType': 'json' ,
cache: $templateCache
).
success(function(data, status, headers, config)
$scope.loading = false;
alert("in accounts");
...
)
)
有关所有详细信息，请参阅更新的plnkr。
【讨论】：
你想在屏幕上看到什么变化？ 你需要alert在$http的成功函数中 并且 loadProducts 需要在控制器的主体中 复制到plunkr @Simon 请检查：plnkr.co/edit/yd3n7n2Yn0lj0dbuE4vG?p=preview。谢谢以上是关于如何使用角度和 UI 引导向选项卡集添加动态内容的主要内容，如果未能解决你的问题，请参考以下文章
jQuery UI 选项卡 - 如何获取当前选定的选项卡索引