如何使用角度和UI引导程序将动态内容添加到选项卡集

Question

Very new to angular and ui bootstrap. Angular和ui引导程序非常新。 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 : 的javascript为：

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. 现在，我想增强上面的示例，以便Tab的内容是动态的。 I need to get data by invoking web service. 我需要通过调用Web服务来获取数据。 say when I click Account Tab, function LoadProducts is called and the data is loaded. 说当我单击“帐户选项卡”时，将调用功能LoadProducts并加载数据。

I would change the javascript to include the function LoadProducts as below: 我将更改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) {
           ...
       ...

        }).

Now I do not know how to call the Loadproducts on click of the tab "Accounts". 现在，我不知道如何在“帐户”选项卡上单击来调用Loadproducts。 Please, can someone help? 拜托，有人可以帮忙吗？

I changed the code to include the fuction on ng-click. 我更改了代码以在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. 它仍然显示静态文本。

******** Revisited my code *************** I did change my code as below, and still, on click of accounts tab, the function ShowTest is not called. ********重新访问了我的代码***************我确实按如下方式更改了我的代码，但是，仍然仍然在单击“帐户”选项卡时未调用ShowTest函数。

The HTML is : 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>

The javascript is as : 的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");
        });
  }
});

The first alert "module " is displayed but the second alert "scope" is not displayed. 显示第一个警报“模块”，但不显示第二个警报“范围”。 This implies the function ShowTest is never fired. 这意味着ShowTest函数永远不会被触发。

Answer 1

You are mixing jQuery and Angular up in a way that will lead you into problems. 您正在以某种会导致问题的方式将jQuery和Angular混合在一起。 Angular has another way of doing showing and hiding and you should use that throughout. Angular还有另一种显示和隐藏方式，您应该在整个过程中使用它。 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 我已经与您的Plunkr一起玩了，但是您现在需要对其进行测试，因为$ http调用需要一个完整的POST 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");
            ...
        })

    }
})

See updated plnkr for all the details. 有关所有详细信息，请参见更新的plnkr 。

如何使用角度和UI引导程序将动态内容添加到选项卡集

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-11-10 18:34:35

如何使用角度和UI引导程序将动态内容添加到选项卡集

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-11-10 18:34:35

解决方案1
1 已采纳 2014-11-10 18:34:35