Angular Scope issues with dynamic tab updates

Question

I am trying to show angular Post data whenever a tab is clicked using ng-click event. But it's not working.

What am i doing wrong here?. First part of code works fine for switching Tabs, But i also want to show dynamic response when any tab is clicked & use it's tabNum as ?id=tabNum in ajax POST

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;

    };

}]);

I HAVE PROBLEM WITH FOLLOWING CODE, WHERE SHOULD I PLACE IT ?

$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
}); }]);

this is my HTML page

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

Reports

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

just create a service where you make the http call and call it from your controller. if you need more detail tell me — stackg91
– stackg91, Commented Oct 11, 2017 at 14:29

stackg91 · Accepted Answer · 2017-10-11 14:57:20Z

1

Hey as mentioned in my comment you can use a service for your http calls

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

Which can be called from the controller (dont forget to inject 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;

        };

the whole would look like this

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

edited Oct 11, 2017 at 14:57

answered Oct 11, 2017 at 14:31

stackg91

5948 silver badges25 bronze badges

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

13 Comments

serverliving.com Over a year ago

Thanks @stackg91, Could you please show me how can i combine with my first part of code above?.

stackg91 Over a year ago

normally you would put services in a different file but for the example just right under the controller

serverliving.com Over a year ago

I tried the whole block you provided, It says error -> ReferenceError: HttpService is not defined

stackg91 Over a year ago

you need to change the controller line i added 'HttpService' in the 2nd line 2x times, maybe you also need to switch service and controller so the service is defined before the controller just copy the service above the controller

serverliving.com Over a year ago

May i know what should i change there in the CalService ?

|

stackg91 · Accepted Answer · 2017-10-11 15:14:44Z

1

Mh maybe the get call maybe console log status and response

answered Oct 11, 2017 at 15:14

stackg91

5948 silver badges25 bronze badges

2 Comments

serverliving.com Over a year ago

Console log shows the correct Data - any issue with $scope.tabdata = data; ?

serverliving.com Over a year ago

Ok. Now i got the data. thanks. Added {{tabdata}} to HTML divs

Collectives™ on Stack Overflow

Angular Scope issues with dynamic tab updates

2 Answers 2

13 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related