个人中心
gpt4 book ai didi

angularjs - Bootstrap 3 : Deselect tab using angular js

转载 作者：行者123 更新时间：2023-12-04 14:41:46 26 4
gpt4 key购买 nike

我正在使用 angular js 和 bootstrap 3，我的应用程序的工作方式类似于......这工作正常。但是，如果我通过单击更改选项卡，然后在单击另一个单击时隐藏带有选项卡的 View ，我会显示带有选项卡的 View ，并从链接中选择选项卡，这是正确的，但是...单击上一个选项卡。

那么，如何取消选择我点击过的选项卡？

编辑 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 以显示它是如何工作的我的代码，您可以检查是否单击选项卡，如果稍后返回单击按钮，您没有选择正确的选项卡。 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 日历，并且在没有 Bootstrap 日历的情况下使用给定的解决方案可以正常工作，但是如果添加 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 上获得的这些库的代码。另外，我添加了管理 Bootstrap 日历的 Controller 。

好的，如果我们去 plunker: https://plnkr.co/edit/PaSqa0jxQjz48pzcmBMa

我们可以看到我们有一个 Bootstrap 日历，我无法选择大于今天 + 1 的日期。这是正确的!但是，如果我单击“Tab 2”按钮，我们可以看到的 Tab 不是 2，而是 1。如果我对 tab 3 做同样的事情，我会得到相同的结果。那是错误的。例如，正确的功能是如果我单击“Tab 2”按钮，我们可以看到选项卡 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>

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

最佳答案

我建议使用 angular-ui-bootstrap tabs为了这。它为大多数 Bootstrap 功能(主要是指令)提供了 Angular 包装器，因此它使这些类型的东西更容易编写(并且代码更简洁，如下所示)。我尽可能少地修改了您的 plunkr，但将其更改为使用 ui-bootstrap 选项卡:https://plnkr.co/edit/qqvY2acsZWbkyFCCT7qr?p=info

新 Controller :

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> 上的属性仅表示当前打开的选项卡的索引，因此只需更改其值即可更改打开/可见的选项卡。还有一些属性可用于这些指令(您可以在我上面链接到的页面上看到它们)，但这显示了如何使用这些选项卡指令的基础。在这些更改之后，我没有看到您在上面描述的问题。

关于angularjs - Bootstrap 3 : Deselect tab using angular js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36330415/

26 4 0
文章推荐： css - 包装宽度不适合 2 列 50%
文章推荐： azure - 如何在Windows Azure上设置32位系统
文章推荐： Svn 复制/移动历史
文章推荐： jaxb - 使用带有 JAXB 注释的 Jackson JSON 库
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com