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>
The javascript as :
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope) {
});
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.
I would change the javascript to include the function LoadProducts as below:
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) {
...
...
}).
Now I do not know how to call the Loadproducts on click of the tab "Accounts". Please, can someone help?
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:
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.
******** Revisited my code *************** I did change my code as below, and still, on click of accounts tab, the function ShowTest is not called.
The HTML is :
<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>
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");
});
}
});
The first alert "module " is displayed but the second alert "scope" is not displayed. This implies the function ShowTest is never fired.
