Angular UI 选项卡 - 以编程方式更改活动选项卡

Question

我的网页有两个 angular ui 标签。我在此页面中添加了一个新按钮，并且我想添加此按钮单击行为：单击按钮时，将选项卡交换到另一个选项卡。

例如：

如果当前活动选项卡是 "first" - 使 "second" 选项卡处于活动状态。
如果当前活动选项卡是 "second" - 使 "first" 选项卡处于活动状态。

这是我的（不是）工作示例： 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)

PS。您上面的代码适用于上面的 1.2.0 版本。如果你有升级版本的选项，你也可以这样做:)

Angular UI 选项卡 - 以编程方式更改活动选项卡

Angular UI tabs - change active tab programmatically

javascript

angularjs

angular-ui

angular-ui-bootstrap