引导选项卡不使用 ng-show 隐藏答案

【问题标题】：Bootstrap tabs not hiding with ng-show引导选项卡不使用 ng-show 隐藏
【发布时间】：2016-11-03 13:52:48
【问题描述】：

我有两个按钮的要求：

A 和 B

A 有 3 个与之关联的选项卡 - a、aa 和 aaa

B 有 3 个与之关联的选项卡 - b、bb 和 bbb

页面最初应该加载一个活动（活动按钮的css类将不同）和“一个”选项卡活动。

当我单击 B 按钮时，B 成为活动按钮，它应该隐藏与 A 关联的所有选项卡并仅显示与 B 关联的选项卡。

当我单击 A 按钮时，A 成为活动按钮，它应该隐藏与 B 关联的所有选项卡并仅显示与 A 关联的选项卡。

基本上在任何时候，都应该只有 3 个标签可见。

我一直在尝试使用 angularjs 的 ng-show 指令来做到这一点。我也尝试了 ng-hide，但没有成功。

这里是plunker。

每次都会点击按钮事件，并且 ng-show 范围变量也在更新。但是标签不会隐藏。

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

}

【问题讨论】：

我没有看到您使用 app.controller() 将 mainController 绑定为应用控制器的位置。试试这些行：var app = angular.module('aaabbb', []); app.controller('mainController', mainController);
我相信 angularjs

标签： angularjs twitter-bootstrap tabs angularjs-scope

【解决方案1】：

工作人员：https://plnkr.co/edit/XSoHry?p=preview

您有很多杂项问题。其一，ng-controller 指令应该只有一个：

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

每次执行创建新范围的操作时，您都会创建控制器的新实例，这肯定会给您带来问题。您只需要一个控制器实例。

没有启动 Angular 应用程序的调用。你至少需要这个：

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

【讨论】：

Angular.module 是在原始代码中定义的。我只是想把它放在这里。 ng-controller 的数量确实是问题所在。现在一切都很好。谢谢。

【解决方案2】：

 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>

【讨论】：

这可行，但不幸的是它使用了不同版本的 Angular js。更改版本将意味着在我的原始应用程序中进行大量代码更改。
在您的角度链接中添加 https: 并替换为我的链接。它会工作..试试看。