如何使用角度和用户界面引导动态内容添加到选项卡集 [英] How to add dynamic contents to tab set using angular and ui bootstrap
问题描述
很新的角度和用户界面的引导。我有一个选项卡中设置如下：
Very new to angular and ui bootstrap. I have a tab set as below:
<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的为：
The javascript as :
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope) {
});
现在我要增强上面的例子，使标签的内容是动态的。我需要调用Web服务来获取数据。说，当我点击帐户选项卡，功能LoadProducts被调用，数据被加载。
Now I want to enhance the above example , so that the contents of Tab are dynamic. I need to get data by invoking web service. say when I click Account Tab, function LoadProducts is called and the data is loaded.
我会改变的JavaScript包括如下功能LoadProducts：
I would change the javascript to include the function LoadProducts as below:
angular.module（'ui.bootstrap.demo'，['ui.bootstrap']）;
angular.module（'ui.bootstrap.demo'）。控制器（'TabsDemoCtrl'，函数（$范围内）{
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上的卡帐户的点击。请能有人帮助。
Now I do not know how to call the Loadproducts on click of the tab "Accounts". Please can some one help.
我改变了code，以包括NG-点击机能的研究。这是行不通的。请参阅以下内容：
I changed the code to include the fuction on ng-click. This does not work . Please see below:
<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的：
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");
}
}）;
没有任何反应，当我点击帐号标签。它仍然显示静态文本。
Nothing happens when I click Account tab. It still shows static text.
再探********我的code ***************
我没有改变我的code下面，并且仍然在帐户选项卡单击功能ShowTest没有被调用。
******** Revisited my code *************** I did change my code as below, and still on click of accounts tab the function ShowTest is not called.
的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的是：
The javascript is as :
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永远不会被解雇。
The first alert "module " is displayed but the second alert "scope" is not displayed. This implies the function ShowTest is never fired.
推荐答案
您在混合jQuery和角度起来的方式，将带领你进入的问题。角有做的显示和隐藏的另一种方式，你应该使用贯穿始终。我和你的周围Plunkr播放，但你现在需要为$ HTTP调用需要一个完整的URL发布到测试它，但我能得到错误警报工作，所以成功应根据rtight情况太火了
You are mixing jQuery and Angular up in a way that will lead you into problems. Angular has another way of doing showing and hiding and you should use that throughout. I've played around with your Plunkr but you'll now need to test it as the $http call needs a full URL to POST to, but I was able to get the error alert to work so success should fire too under the rtight circumstances
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 的所有细节。
See updated plnkr for all the details.
这篇关于如何使用角度和用户界面引导动态内容添加到选项卡集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
