0
NG-ショーで隠れていない：ブートストラップタブは、私は私は2つのボタンを持っている必要有する
A及びBを
A IT-に関連付けられた3つのタブを有し、AA及びAAA
B
ページは最初にAアクティブ（cssクラスはアクティブなボタンでは異なります）と「a」タブがアクティブになるように読み込まれます。
IはBボタンをクリックすると、Bがアクティブボタンになり、それがAに関連付けられているすべてのタブを非表示にし、B.
Iボタンをクリックすると、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を使用してアプリケーションのコントローラとしてメインコントローラを結合したところ、私は（表示されていない：あなたはこの、最低でも、必要があります。次の行を試してください： 'var app = angular.module（ 'aaabbb'、[]）; app.controller（ 'mainController'、mainController）; ' – Mahesh
app.controller（）を使ったmainControllerのバインディングは、angularjs <1.3では必要ないと私は考えています。私が間違っているなら、私を訂正してください。 – Murali