Javascript 如何使用angular和UI引导向选项卡集添加动态内容_Javascript_Html_Angularjs_Angular Ui Bootstrap

Javascript 如何使用angular和UI引导向选项卡集添加动态内容

javascript html angularjs

Javascript 如何使用angular和UI引导向选项卡集添加动态内容,javascript,html,angularjs,angular-ui-bootstrap,Javascript,Html,Angularjs,Angular Ui Bootstrap,非常新的角度和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="serve

非常新的角度和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>

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) {
           ...
       ...

        }).

现在我想增强上面的示例，使选项卡的内容是动态的。我需要通过调用web服务来获取数据。比如说，当我单击Account选项卡时，调用函数LoadProducts并加载数据

我将更改javascript以包含函数LoadProducts，如下所示：

<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>

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>

}))

单击“帐户”选项卡时，不会发生任何情况。它仍然显示静态文本

********重温我的代码*************** 我确实改变了我的代码，如下所示，但在点击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>

显示第一个警报“模块”，但不显示第二个警报“范围”。这意味着永远不会触发函数ShowTest

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

    }
})

有关所有详细信息，请参阅更新。

您希望在屏幕上看到什么更改？您需要$http的成功功能中包含警报，并且loadProducts需要位于控制器的主体中。将其复制到plunkr@Simon中请检查：。谢谢你还需要帮忙吗？

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

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

    }
})