Question

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

那么，我如何取消选择我点击它的标签？

修改1：

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

编辑2：

我添加此plunker以显示它如何工作我的代码，您可以检查如果您在选项卡上clic，如果稍后返回单击按钮您没有选择正确的选项卡。 https://plnkr.co/edit/y22T01OwxgttDWM1mJeH

HTML：

<body ng-controller="MainCtrl as ctrl">
    <button id="bTab1" ng-click="ctrl.buttonClicked($event)">
        Tab 1
    </button>
    <button id="bTab2" ng-click="ctrl.buttonClicked($event)">
        Tab 2
    </button>
    <button id="bTab3" ng-click="ctrl.buttonClicked($event)">
        Tab 3
    </button>
    <div ng-show = "ctrl.show_tabs">
      <div class = "row" style = "text-align: right; margin-top: 10px">
        <button ng-click="ctrl.closeTab()">
            Hide Tabs
        </button>
      </div>
      <ul class="nav nav-tabs" id="myTab">
          <li ng-class = "ctrl.active_pai"><a data-target="#pai" data-toggle="tab">PAI</a></li>
          <li ng-class = "ctrl.active_pap"><a data-target="#pap" data-toggle="tab">PAP</a></li>
          <li ng-class = "ctrl.active_ip"><a data-target="#ip" data-toggle="tab">IP</a></li>
        </ul>

        <div class="tab-content">
          <div class="tab-pane" ng-class = "ctrl.active_pai" id="pai">Content PAI</div>
          <div class="tab-pane" ng-class = "ctrl.active_pap" id="pap">Content PAP</div>
          <div class="tab-pane" ng-class = "ctrl.active_ip" id="ip">Content IP</div>
        </div>      
    </div>
 </body>

使用Javascript：

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

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

$scope.name = 'World';
self.show_tabs = false;
self.active_pai = "";
self.active_pap = "";
self.active_ip = "";

self.buttonClicked = function(event) {
  self.show_tabs = true;

  if (event.currentTarget.id == "bTab1"){
      self.active_pai = "active";
      self.active_pap = "";
      self.active_ip = "";
  }

  if (event.currentTarget.id == "bTab2"){
      self.active_pai = "";
      self.active_pap = "active";
      self.active_ip = "";
  }

  if (event.currentTarget.id == "bTab3"){
      self.active_pai = "";
      self.active_pap = "";
      self.active_ip = "active";
  }
};

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

});

编辑3：

更多问题：

在我的代码中，我有选项卡和Bootstrap日历，并且给定的解决方案在没有引导日历的情况下工作正常，但是如果添加引导日历，则无法正常工作。

我修改了我的origina plunker并添加了一个bootstrap日历并更改了这些库：

<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上获得的这些库的代码。另外，我添加了管理引导日历的控制器。

好的，如果我们去找那个：https://plnkr.co/edit/PaSqa0jxQjz48pzcmBMa

我们可以看到我们有一个引导日历，我不能选择比今天更大的日子+ 1.这是正确的！但是，如果我点击按钮“Tab 2”，我们可以看到的标签不是2，它是1.如果我对标签3做同样的事情，我得到相同的结果。那是错的。正确的功能是如果我点击“标签2”按钮，我们可以看到标签2，例如。

好的，如果我更换了这些图书馆......

<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.这是错误的！

Answer 1

我建议您使用angular-ui-bootstrap tabs。它为大多数引导功能（主要是指令）提供了角度包装，因此它使这些类型的事情更容易编写（代码更清晰，如下所示）。我尽可能少地修改了你的plunkr，但更改了它以使用ui-bootstrap标签：https://plnkr.co/edit/qqvY2acsZWbkyFCCT7qr?p=info

新控制器：

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>

传递到ctrl.active上的active属性的

<uib-tabset>只代表当前打开的标签的索引，因此只需更改其值即可更改哪个标签处于打开/可见状态。还有一些属性可用于这些指令（您可以在我上面链接的页面上看到它们），但这显示了如何使用这些Tab指令的基础。在这些变化之后，我没有看到你上面描述的问题。

Bootstrap 3：使用角度js取消选择标签

1 个答案: