Question

角度和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>

javascript为：

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope) {

});

现在我想增强上面的例子，以便Tab的内容是动态的。我需要通过调用Web服务来获取数据。当我点击帐户标签时，调用函数LoadProducts并加载数据。

我会更改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) {
           ...
       ...

        }).

现在我不知道如何在点击“帐户”标签时调用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>

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

}）;

点击“帐户”标签后没有任何反应。它仍然显示静态文本。

********重访我的代码*************** 我确实更改了我的代码，但是，在点击帐户标签时，不会调用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>

<script type ="text/javascript" >
   $(window).load(function() {
       $("#TestAcccount").hide();
   });


</script>

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

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

Answer 1

您正在以一种导致问题的方式混合使用jQuery和Angular。 Angular有另一种显示和隐藏方式，你应该始终使用它。我已经和你的Plunkr一起玩了，但你现在需要测试它，因为$ http调用需要一个完整的POST到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");
            ...
        })

    }
})

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

如何使用angular和UI bootstrap将动态内容添加到选项卡集

1 个答案: