如何關閉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; 
    }; 
    });