Angular UI選項卡 - 以編程方式更改活動選項卡

Question

我有一個帶有兩個角度ui標簽的網頁。 我在此頁面中添加了一個新按鈕，我想添加此按鈕單擊行為：單擊該按鈕時，將該選項卡交換到另一個選項卡。

例如：

• 如果當前活動選項卡是“第一個” - 使“第二個”選項卡處於活動狀態。
• 如果當前活動選項卡是“秒” - 使“第一個”選項卡處於活動狀態。

這是我的（不）工作示例： http ： //plnkr.co/edit/2ajxz7oGYmF8oPlHc8kc

<uib-tabset type="pills" active="selected">
  <uib-tab heading="First" index="1">
    First data
  </uib-tab>
  <uib-tab heading="Second" index="2">
    Second data
  </uib-tab>
</uib-tabset>

我很確定我的一個問題是取決於active="selected"段。 這是因為我期望變量將放在$scope ，而它在分離的范圍（tab-set）上運行。 我試圖通過將此段更改為active="$parent.$parent.selected"來解決此問題，但沒有成功。

所以，主要問題是swap()函數：

  $scope.swap = function() {
    alert($scope.selected);
    if ($scope.selected == 1)
      $scope.selected = 2;
    else
      $scope.selected = 1;
  }

我該怎么做？

Answer 1

您使用的是舊版Angular UI Bootstrap（0.14.3）

<uib-tabset>
  <uib-tab heading="First" active="selected == 1">
    First data
  </uib-tab>
  <uib-tab heading="Second" active="selected == 2">
    Second data 
  </uib-tab>
</uib-tabset>

有關詳細信息，請參閱文檔（ http://angular-ui.github.io/bootstrap/versioned-docs/0.14.3/#/tabs ）

也是一個有效的Plunkr（ http://plnkr.co/edit/qAbUtv06ck64JCf8JaKp?p=preview ）

PS。 上面的代碼適用於上面的1.2.0版。 如果你有升級版本的選項，你也可以這樣做:)