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，而它在分离的范围（选项卡集）上运行。我试图通过将此段更改为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 )

附注。您上面的代码适用于 1.2.0 以上的版本。如果您可以选择升级版本，您也可以这样做:)