Angularjs 引导3：使用angular js取消选择选项卡

我正在使用angular js和bootstrap 3，我的应用程序就像。。。我有一个视图，你有几个链接，让你显示一个有几个选项卡的div，并选择其中一个。这个很好用。但是，如果我通过单击来更改选项卡，然后在我再次单击时隐藏带有选项卡的视图，我会显示带有选项卡的视图，并且从链接中选择了选项卡，这是正确的，但是。。。单击上一个选项卡

那么，我如何才能取消选择我一直在做的标签点击它

编辑1:

我将发布几个截图，试图更好地解释我的问题

编辑2:

我添加这个plunker是为了展示它是如何工作的，你可以检查一下，如果你点击了一个标签，如果你稍后返回一个按钮，你没有选择正确的标签

HTML:

编辑3:

更多问题：

在我的代码中，我有选项卡和引导日历，对于给定的解决方案，没有引导日历也可以正常工作，但如果添加引导日历，则无法正常工作

我已修改了我的origina plunker，并添加了引导日历，并更改了这些库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js"></script>

通过这些：

<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="ui-bootstrap-tpls-0.14.3.min.js"></script> 

你在plunker上得到的这些库的代码。另外，我还添加了管理引导日历的控制器

好的，如果我们去普朗克：

我们可以看到，我们有一个引导日历，我不能选择比今天+1更大的日期。没错！但是，如果我点击按钮“Tab2”，我们看到的不是2，而是1。如果我对表3做同样的处理，我会得到同样的结果。那是错误的。正确的功能是，如果我点击按钮“Tab 2”，我们可以看到Tab 2，例如

好的，如果我在plunker上更改这些库

<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="ui-bootstrap-tpls-0.14.3.min.js"></script> 

根据解决方案中给出的公式：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js"></script>

我们可以看到选项卡工作正常，但引导日历允许您选择比今天+1更大的天数。这是错误的

我建议您使用。它围绕大多数引导功能（主要是指令）提供了角度包装，因此它使这些类型的东西更容易编写（并且代码更干净，如下所示）。我尽可能少地修改了您的plunkr，但将其更改为使用ui引导选项卡：

新控制器：

app.controller('MainCtrl', function($scope) {
    var self = this;

    $scope.name = 'World';

    self.buttonClicked = function(index) {
        self.show_tabs = true;
        self.active = index;
    };

    self.closeTab = function(){
        self.show_tabs = false;
    }

});

Html更改：

<button id="bTab1" ng-click="ctrl.buttonClicked(1)">
        Tab 1
</button>
<button id="bTab2" ng-click="ctrl.buttonClicked(2)">
        Tab 2
</button>
<button id="bTab3" ng-click="ctrl.buttonClicked(3)">
        Tab 3
</button>
...
<div ng-show = "ctrl.show_tabs">
...
    <uib-tabset active="ctrl.active">
        <uib-tab index="1" heading="PAI">Content PAI</uib-tab>
        <uib-tab index="2" heading="PAP">Content PAP</uib-tab>
        <uib-tab index="3" heading="IP">Content IP</uib-tab>
    </uib-tabset>
</div>

表1
表2
表3
...
...
内容牌
内容PAP
内容IP

---

ctrl.active

，它被传递到

上的

active

属性中，它只表示当前打开的选项卡的索引，因此只要更改其值，就会更改打开/可见的选项卡。还有一些属性可以用于这些指令（您可以在我上面链接的页面上看到），但这显示了如何使用这些选项卡指令的基础。在这些更改之后，我还没有看到您在上面描述的问题。

这个问题太令人困惑了。你能制作一个plunker吗？或者在你提到的标签中添加一个标签的屏幕截图。我相信这很简单，也许是一个代码片段，在其中处理div内容的更改以及前后的屏幕截图，这将是一个很好的开始。好的。首先，我发布了一些截图，然后我将尝试制作一个plunker。谢谢你的回答！！！我正在尝试将此解决方案应用到我的代码中，并且。。。它不工作！！！我不知道发生了什么！！！self.active属性不起作用！！！始终打开标签1：固定它！！！我不知道为什么，但是使用self.active时，属性active没有正确更新！！！我必须将self.active更改为$scope.active，现在它工作正常！！当您执行

self.active

时，您是否确保在html中执行

ctrl.active

（而不仅仅是

active

）？@JoséCarlos该示例被破坏的原因是，在

ui引导程序tpls

的0.14.3版本中，

不支持

active

属性。这是基于特定版本的文档：。不过，该版本确实支持

上的

活动

属性。所以日历没有破坏任何东西，它是基于您正在使用的库的版本（我在我的plunkr中使用了一个更新的版本）。因此，您要么更新库，要么稍微更改代码以适应此旧版本。@JoséCarlos同样的事情适用于日历，它在新版本中的工作方式与旧版本不同。较新版本不使用

max-date

属性，而是希望所有配置都通过

datepicker-options

属性，其中一个属性是

maxDate

。因此，您使用的代码与日历中的旧版本兼容，并且与新版本的选项卡兼容，这就是为什么在两个版本之间来回切换时，总会出现一些问题。

app.controller('MainCtrl', function($scope) {
    var self = this;

    $scope.name = 'World';

    self.buttonClicked = function(index) {
        self.show_tabs = true;
        self.active = index;
    };

    self.closeTab = function(){
        self.show_tabs = false;
    }

});

<button id="bTab1" ng-click="ctrl.buttonClicked(1)">
        Tab 1
</button>
<button id="bTab2" ng-click="ctrl.buttonClicked(2)">
        Tab 2
</button>
<button id="bTab3" ng-click="ctrl.buttonClicked(3)">
        Tab 3
</button>
...
<div ng-show = "ctrl.show_tabs">
...
    <uib-tabset active="ctrl.active">
        <uib-tab index="1" heading="PAI">Content PAI</uib-tab>
        <uib-tab index="2" heading="PAP">Content PAP</uib-tab>
        <uib-tab index="3" heading="IP">Content IP</uib-tab>
    </uib-tabset>
</div>