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

时间:2016-03-31 10:12:34

标签: angularjs twitter-bootstrap twitter-bootstrap-3 tabs

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

那么,我如何取消选择我点击它的标签?

修改1:

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

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

编辑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.这是错误的!

1 个答案:

答案 0 :(得分:7)

我建议您使用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指令的基础。在这些变化之后,我没有看到你上面描述的问题。