Question

我有一个要求，我有两个按钮：

A和B

A有3个与之关联的标签 - a，aa和aaa

B有3个与它关联的标签 - bb，bb和bbb

页面最初应加载A活动（活动按钮的css类不同）和“a”选项卡处于活动状态。

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

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

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

我一直在尝试使用angularjs的ng-show指令。我也没试过也没试过。

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

}

Answer 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.module('aaabbb', [])
  .controller('mainController', mainController);

每次执行此操作时，您都在创建一个新的控制器实例，从而创建一个新的范围，这可以确保您遇到问题。您只需要一个控制器实例。

没有电话启动角应用程序。你至少需要这个：

FOR e in 0..3 ANY 'Node/5025926' Edge
FILTER 

e.ModelType == "A.Model" && 
e.TargetType == "A.Target" && 
e.SourceType == "A.Source"

RETURN e

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

＆＃13;

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

＆＃13;

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

＆＃13;

不用ng-show隐藏的引导选项卡

2 个答案: