CODEWITHSUNDEEP
angularjstwitter-bootstraptabsangularjs-scope
Murali
Murali

Reputation: 35

Bootstrap tabs not hiding with ng-show

I have a requirement where I have two buttons:

A and B

A has 3 tabs associated with it- a,aa and aaa

B has 3 tabs associated with it- b,bb and bbb

The page should initially load with A active(css class will be different for the active button) and 'a' tab active.

When I click B button, B becomes the active button and it should hide all the tabs associated with A and show only tabs associated with B.

When I click A button, A becomes the active button and it should hide all the tabs associated with B and show only tabs associated with A.

Basically at any point of time, there should be only 3 tabs visible.

I have been trying to do this using ng-show directive of angularjs. I tried ng-hide also with no luck.

Here is the plunker.

The button events are getting hit every time and the ng-show scope variable is also getting updated. But the tabs just dont hide.

    <!DOCTYPE html>
<html ng-app="aaabbb">

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

<body id="main" ng-controller="mainController" >
    <div class="container">

    <div  class="row">
        <form>
            <div class="form-group ">
                <div class="container">
                    <div class="row text-center">
                        <div ng-controller="mainController">
                            <input type="button" value="a" ng-class="{'btn btn-primary': aselected}" ng-click="aSelect()" />
                            <input type="button" value="b" ng-class="{'btn btn-primary': bselected}" ng-click="bSelect()" />
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div ng-controller="mainController">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#a" data-toggle="tab" ng-show='a'>a</a></li>
        <li><a href="#aa" data-toggle="tab" ng-show='a'>aa</a></li>
        <li><a href="#aaa" data-toggle="tab" ng-show='a'>aaa</a></li>
        <li><a href="#b" data-toggle="tab" ng-show='b'>b</a></li>
        <li><a href="#bb" data-toggle="tab" ng-show='b'>bb</a></li>
        <li><a href="#bbb" data-toggle="tab" ng-show='b'>bbb</a></li>
    </ul>
    </div>
    <div id="atabcontent" class="tab-content" ng-controller="mainController" ng-show='a'>

        <div class="tab-pane fade in active" id="a" ng-show='a'>
            <p>a content</p>
        </div>
        <div class="tab-pane fade" id="aa" ng-show='a'>
            <p>aa content</p>
        </div>
        <div class="tab-pane fade" id="aaa" ng-show='a'>
            <p>aaa content</p>
        </div>
    </div>

    <div id="btabcontent" class="tab-content" ng-controller="mainController" ng-show='b'>

        <div class="tab-pane fade in active" id="b" ng-show='b'>
            <p>b content</p>
        </div>
        <div class="tab-pane fade" id="bb" ng-show='b'>
            <p>bb content</p>
        </div>
        <div class="tab-pane fade" id="bbb" ng-show='b'>
            <p>bbb content</p>
        </div>
    </div>


</div>


function mainController($scope, $http) {

$scope.a=true;
$scope.b=false;



$scope.aSelect = function(){
    $scope.aselected=true;
    $scope.bselected=false;
    $scope.a=true;
    $scope.b=false;
}

$scope.bSelect = function(){
    $scope.aselected=false;
    $scope.bselected=true;
    $scope.a=false;
    $scope.b=true;
}



$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
        var target = $(e.target).attr("href");

        if(target=='#a'){
            //reload the content from the web service
        }
        else if (target == '#aa') {
           //reload the content from the web service
        } else if (target == '#aaa') {
            //reload the content from the web service
        } else if (target == '#b') {
            //reload the content from the web service
        } else if (target == "#bb") {
            //reload the content from the web service
        } else if (target == "#bbb") {
            //reload the content from the web service
        }
    });

}

Upvotes: 0

Views: 1388

Answers (2)

Himanshu Shekhar
Himanshu Shekhar

Reputation: 1262

 Run below html and angular js code. 
 Error in your code:
 1. Change the link of 1st script tag as mentioned in below code.
 2. Angular module = aaabbb is not defined. that is included in below code.
 3. Attach the controller to angular module.
 4. Their should be only one ng-controller in body tag.


// Code goes here
// module name aaabbb is attached to angular.
var app = angular.module("aaabbb",[]);
var mainController = function($scope, $http) {
    
    $scope.a=true;
    $scope.b=false;
    
    
    
    $scope.aSelect = function(){
        $scope.aselected=true;
        $scope.bselected=false;
        $scope.a=true;
        $scope.b=false;
    }
    
    $scope.bSelect = function(){
        $scope.aselected=false;
        $scope.bselected=true;
        $scope.a=false;
        $scope.b=true;
    }
    
  
    
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
            var target = $(e.target).attr("href");

            if(target=='#a'){
                //reload the content from the web service
            }
            else if (target == '#aa') {
               //reload the content from the web service
            } else if (target == '#aaa') {
                //reload the content from the web service
            } else if (target == '#b') {
                //reload the content from the web service
            } else if (target == "#bb") {
                //reload the content from the web service
            } else if (target == "#bbb") {
                //reload the content from the web service
            }
        });
      
};
 // mainController is attached to angular module.
app.controller("mainController",mainController);
<!DOCTYPE html>
<html ng-app="aaabbb">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

<body id="main" ng-controller="mainController" >
    <div class="container">

        <div  class="row">
            <form>
                <div class="form-group ">
                    <div class="container">
                        <div class="row text-center">
                            <div>
                                <input type="button" value="a" ng-class="{'btn btn-primary': aselected}" ng-click="aSelect()" />
                                <input type="button" value="b" ng-class="{'btn btn-primary': bselected}" ng-click="bSelect()" />
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div>
        <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
            <li class="active"><a href="#a" data-toggle="tab" ng-show='a'>a</a></li>
            <li><a href="#aa" data-toggle="tab" ng-show='a'>aa</a></li>
            <li><a href="#aaa" data-toggle="tab" ng-show='a'>aaa</a></li>
            <li><a href="#b" data-toggle="tab" ng-show='b'>b</a></li>
            <li><a href="#bb" data-toggle="tab" ng-show='b'>bb</a></li>
            <li><a href="#bbb" data-toggle="tab" ng-show='b'>bbb</a></li>
        </ul>
        </div>
        <div id="atabcontent" class="tab-content" ng-show='a'>
           
            <div class="tab-pane fade in active" id="a" ng-show='a'>
                <p>a content</p>
            </div>
            <div class="tab-pane fade" id="aa" ng-show='a'>
                <p>aa content</p>
            </div>
            <div class="tab-pane fade" id="aaa" ng-show='a'>
                <p>aaa content</p>
            </div>
        </div>
        
        <div id="btabcontent" class="tab-content"  ng-show='b'>
            
            <div class="tab-pane fade in active" id="b" ng-show='b'>
                <p>b content</p>
            </div>
            <div class="tab-pane fade" id="bb" ng-show='b'>
                <p>bb content</p>
            </div>
            <div class="tab-pane fade" id="bbb" ng-show='b'>
                <p>bbb content</p>
            </div>
        </div>


    </div>
    

</body>


</html>

Upvotes: 0

Pop-A-Stash
Pop-A-Stash

Reputation: 6652

Working plunker: https://plnkr.co/edit/XSoHry?p=preview

You have a lot of miscellaneous issues. For one, there are several ng-controller directives when there should only be one: 

<body id="main" ng-controller="mainController" >
...
<div ng-controller="mainController">
...
<div id="atabcontent" class="tab-content" ng-controller="mainController" ng-show='a'>
...
<div id="btabcontent" class="tab-content" ng-controller="mainController" ng-show='b'>

You are creating a new instance of the controller each time you do that which creates a new scope, which is guaranteed to cause you problems. You only need one instance of the controller.

There is no call to start the angular app. You need, at minimum, this:

angular.module('aaabbb', [])
  .controller('mainController', mainController);

Upvotes: 0

Related Questions