Question

我试图在使用ng-click事件单击选项卡时显示角度Post数据。但它不起作用。

我在这里做错了什么？代码的第一部分适用于切换选项卡，但我还希望在单击任何选项卡时显示动态响应。在ajax POST中使用它的tabNum为？id = tabNum

angular.module('tabApp', [])
  .controller('TabController', ['$scope', function($scope, $http) {
    $scope.tab = 1;

    $scope.setTab = function(newTab){
      $scope.tab = newTab;
    };

    $scope.isSet = function(tabNum){
      return $scope.tab === tabNum;

    };

}]);

我有以下代码的问题，我应该在哪里放置它？

$http.get('http://localhost:8080/welcome.html?id=$tabNum')
    .success(function(data, status, headers, config) {
      $scope.tab = data;
    })
    .error(function(data, status, headers, config) {
      // log error
}); }]);

这是我的HTML页面

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>MY

报告

  <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css'>

      <link rel="stylesheet" href="style.css">


</head>

<body>
  <div class="container" ng-app="tabApp">
  <div class="row" ng-controller="TabController">
    <div class="col-md-3">
        <ul class="nav nav-pills nav-stacked">
        <li ng-class="{ active: isSet(1) }">
            <a href ng-click="setTab(1)">SHOW Manual Admins</a>
        </li>
        <li ng-class="{ active: isSet(2) }">
            <a href ng-click="setTab(2)">SHOW ONE Admins</a>
        </li>
        <li ng-class="{ active: isSet(3) }">
            <a href ng-click="setTab(3)">SHOW TWO Read Admins</a>
        </li>
        <li ng-class="{ active: isSet(4) }">
            <a href ng-click="setTab(4)">SHOW THREE Admins</a>
        </li>
        <li ng-class="{ active: isSet(5) }">
            <a href ng-click="setTab(5)">SHOW FOUR Read Admins</a>
        </li>
        <li ng-class="{ active: isSet(6) }">
            <a href ng-click="setTab(6)">SHOW FIVE Read Admins</a>
        </li>
        </ul>
    </div>
    <div class="col-md-8">
        <div class="jumbotron">
        <div ng-show="isSet(1)">
          <h1>CONTENT1</h1>
            </div>
            <div ng-show="isSet(2)">
          <h1>CONTENT2</h1>
        </div>
        <div ng-show="isSet(3)">
          <h1>CONTENT3</h1>
        </div>
        <div ng-show="isSet(4)">
          <h1>CONTENT4</h1>
        </div>
        <div ng-show="isSet(5)">
          <h1>CONTENT5</h1>
        </div>
        <div ng-show="isSet(6)">
          <h1>CONTENT6</h1>
        </div>
    </div>
  </div>
</div>
 </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js'></script>

    <script  src="app.js"></script>

</body>
</html>

Answer 1

嘿，如我的评论所述，您可以使用http呼叫服务

.service('HttpService', ['$rootScope', '$http', 'Ls', 'CommonService', 'DateService', function ($rootScope, $http, Ls, CommonService, DateService) {
        return {
            CallService: function (url, callback) {                   
                $http.get(url)
                    .success(function (data, status) {                            
                        callback(data, status);
                    }).error(function (data, status) {
                        callback(data, status);
                    });                 
            } 
        }
    });

可以从控制器中调用（不要忘记注入HttpService）

    .controller('TabController', ['$scope', 'HttpService', function($scope, HttpService) {
        $scope.tab = 1;

        $scope.setTab = function(newTab){
              $scope.tab = newTab;

            HttpService.CallService('http://localhost:8080/welcome.html?id='+newTab, function (data) {
                               $scope.tabdata = data;

            });
        };


        $scope.isSet = function(tabNum){
          return $scope.tab === tabNum;

        };

整体看起来像这样

angular.module('tabApp', [])
  .controller('TabController', ['$scope', 'HttpService', function($scope, HttpService) {
        $scope.tab = 1;

        $scope.setTab = function(newTab){
              $scope.tab = newTab;

            HttpService.CallService('http://localhost:8080/welcome.html?id='+newTab, function (data) {
                               $scope.tabdata = data;

            });
        };


        $scope.isSet = function(tabNum){
          return $scope.tab === tabNum;

        };
}])

.service('HttpService', ['$rootScope', '$http', function ($rootScope, $http) {
        return {
            CallService: function (url, callback) {                   
                $http.get(url)
                    .success(function (data, status) {                            
                        callback(data, status);
                    }).error(function (data, status) {
                        callback(data, status);
                    });                 
            } 
        }
    });

Answer 2

可能是来电可能是控制台日志状态和响应

角度范围问题与动态选项卡更新

2 个答案: