如何关闭AngularJS中的活动选项卡？

Question

我的标签效果很好，但是当我再次点击同一个标签时，我无法弄清楚如何关闭它们。正如您所看到的，我可以将鼠标悬停在选项卡上并单击它们，但我无法重新点击以关闭它们。

奖金创意 - 我也希望能够将鼠标悬停在他们身上并进行信息预览!!

app.js -

app.controller("TabController", function() {
    this.tab = 0;

    this.isSet = function(checkTab) {
      return this.tab === checkTab;
    };

    this.setTab = function(setTab) {
      this.tab = setTab;
    };
  });

index.html -

<span class="pull-right" ng-controller="TabController as tab">
          <ul class="nav nav-pills">
            <li ng-class="{ active:tab.isSet(1) }">
              <a href="" ng-click="tab.setTab(1)">News</a>
            </li>
            <li ng-class="{ active:tab.isSet(2) }">
              <a href="" ng-click="tab.setTab(2)">Scores</a>
            </li>
            <li ng-class="{ active:tab.isSet(3) }">
              <a href="" ng-click="tab.setTab(3)">Alternate Sites</a>
            </li>
          </ul>

          <div ng-show="tab.isSet(1)">
            {{site.news}}
          </div>

          <div ng-show="tab.isSet(2)">
            <blockquote>Governance - {{site.goverance}} | Environment - {{site.environment}} | Community - {{site.community}}</blockquote>
            Powered by CSRhub
          </div>

          <div ng-show="tab.isSet(3)">
            <section ng-show="site.alternatives.length">
              <ul class="list-inline thumbs">{{site.alternatives}}</ul>
            </section>
          </div>
        </span>
        </span>

Answer 1

我认为你想要做的是：

app.controller("TabController", function() {
    this.tab = 0;

    this.isSet = function(checkTab) {
      return this.tab === checkTab;
    };

    this.setTab = function(setTab) {
      if(setTab==this.tab)
          this.tab=-1
      else
          this.tab = setTab;
    };
  });