How to add dynamic contents to tab set using angular and UI bootstrap

Question

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.

Do you need any more help?

Simon H
– Simon H

2014-11-11 19:50:46 +00:00
Commented Nov 11, 2014 at 19:50 — Simon H
– Simon H, Commented Nov 11, 2014 at 19:50

Simon H · Accepted Answer · 2014-11-12 08:06:16Z

1

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");
            ...
        })

    }
})

See updated plnkr for all the details.

edited Nov 12, 2014 at 8:06

answered Nov 10, 2014 at 18:34

Simon H

21.2k14 gold badges84 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Simon H Over a year ago

What do you want to see change on the screen?

Simon H Over a year ago

You need the alert to be in the success function of $http

Simon H Over a year ago

And loadProducts needs to be in the body of your controller

Simon H Over a year ago

Copy it into a plunkr

resthere Over a year ago

@ Simon Please check: plnkr.co/edit/yd3n7n2Yn0lj0dbuE4vG?p=preview . Thanks

|

Collectives™ on Stack Overflow

How to add dynamic contents to tab set using angular and UI bootstrap

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related