angularjs – Bootstrap 3：使用角度js取消选择制表符

发布时间：2020-12-17 10:19:15 所属栏目：安全来源：网络整理

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

我正在使用角度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上获得的这些库的代码.另外,我添加了管理引导日历的控制器.

好的,如果我们去找那个：01007

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

我建议使用 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,传递给< uib-tabset>上的活动属性只表示当前打开的选项卡的索引,因此只更改其值将更改打开/可见的选项卡.还有一些属性可用于这些指令(您可以在我上面链接的页面上看到它们),但这显示了如何使用这些Tab指令的基础.在这些更改之后,我没有看到您在上面描述的问题.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!