angularjs 使用 ui.bootstrap 切换选项卡视图答案

【问题标题】：angularjs switch tab view using ui.bootstrapangularjs 使用 ui.bootstrap 切换选项卡视图
【发布时间】：2016-12-24 12:45:18
【问题描述】：

我已经设置了两个按钮，点击后可以切换到其他两个标签，但它不起作用。

这里是html代码：

<div ng-controller="TabCtrl">
    <uib-tabset class="tabbable">
        <uib-tab heading="my tab 0" ng-attr-active="tabs[0].active">
            <div class="row">

            <a class="btn btn-wide btn-azure" ng-click="go_tab1()">
            Go To tab 1
            </a>
            <a class="btn btn-wide btn-azure" ng-click="go_tab2()">
            Go To tab 2
            </a>
            </div>
        </uib-tab>
        <uib-tab heading="my tab 1" ng-attr-active="tabs[1].active">
            <div class="row">
            </div>
        </uib-tab>
        <uib-tab heading="my tab 2" ng-attr-active="tabs[2].active">
            <div class="row">
            </div>
        </uib-tab>
    </uib-tabset>
</div>

这里是控制器：

$scope.tabs = [{active: true}, {active: false}, {active: false}];
$scope.go_tab1 = function() {
    $scope.tabs[1].active = true;
};
$scope.go_tab2 = function() {
    $scope.tabs[2].active = true;
};

【问题讨论】：

标签： javascript angularjs angular-ui-bootstrap ui.bootstrap

【解决方案1】：

如果你添加正确的库，它会正常工作

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
   <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>

并注入 ui.bootstrap 依赖项。

var app = angular.module('app', ['ui.bootstrap']);

var app = angular.module('app', ['ui.bootstrap']);

app.controller('TabCtrl', function($scope) {
  
$scope.tabs = [{active: true}, {active: false}, {active: false}];
$scope.go_tab1 = function() {
    $scope.tabs[1].active = true;
};
$scope.go_tab2 = function() {
    $scope.tabs[2].active = true;
};

});

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
   <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
    <script src="app.js"></script>

<body ng-app="app">
 <div ng-controller="TabCtrl">

  <uib-tabset class="tabbable">
        <uib-tab heading="my tab 0" ng-attr-active="tabs[0].active">
            <div class="row">

            <a class="btn btn-wide btn-azure" ng-click="go_tab1()">
            Go To tab 1
            </a>
            <a class="btn btn-wide btn-azure" ng-click="go_tab2()">
            Go To tab 2
            </a>
            </div>
        </uib-tab>
        <uib-tab heading="my tab 1" ng-attr-active="tabs[1].active">
            <div class="row">
            </div>
        </uib-tab>
        <uib-tab heading="my tab 2" ng-attr-active="tabs[2].active">
            <div class="row">
            </div>
        </uib-tab>
    </uib-tabset>
</div>
</body>

【讨论】：

我有与您的回答相关的问题。如果您在选项卡中添加内容，无论您有多少选项卡，它都不会显示最后一个选项卡内容。只有最后一个选项卡不会显示内容。为什么会这样？
@StefanJovanic ：你能指出我的问题吗，我会看看或提供一个 jsfiddle 或 plunker。
抱歉打扰，我发现了问题所在。我有旧的自定义 css 和我创建的选项卡，并且意外地发现名称与引导程序中的名称完全相同。你能相信吗？出于某种原因，我将显示最后一个孩子设置为无。我很抱歉。
@StefanJovanic 没问题。很高兴您发现了这个问题。