[英]Angular UI tabs - change active tab programmatically
I have a webpage with two angular ui tabs. 我有一个带有两个角度ui标签的网页。 I adding a new button into this page and I want to add this button-click behavior: when the button clicked, swap the tab to the other tab. 我在此页面中添加了一个新按钮,我想添加此按钮单击行为:单击该按钮时,将该选项卡交换到另一个选项卡。
For example: 例如:
Here is my (not) working example: http://plnkr.co/edit/2ajxz7oGYmF8oPlHc8kc 这是我的(不)工作示例: 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>
I'm pretty sure that one of my problem is depending on the active="selected"
segment. 我很确定我的一个问题是取决于active="selected"
段。 This since I'm expecting that the variable will be placed on $scope
, while it's running on separated scope (of the tab-set). 这是因为我期望变量将放在$scope
,而它在分离的范围(tab-set)上运行。 I tried to pass this issue with workaround by change this segment to active="$parent.$parent.selected"
- with no success. 我试图通过将此段更改为active="$parent.$parent.selected"
来解决此问题,但没有成功。
So, the main problem is the swap()
function: 所以,主要问题是swap()
函数:
$scope.swap = function() {
alert($scope.selected);
if ($scope.selected == 1)
$scope.selected = 2;
else
$scope.selected = 1;
}
How should I do it right? 我该怎么做?
You are using an old version of Angular UI Bootstrap (0.14.3) 您使用的是旧版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>
See documentation for more info ( http://angular-ui.github.io/bootstrap/versioned-docs/0.14.3/#/tabs ) 有关详细信息,请参阅文档( http://angular-ui.github.io/bootstrap/versioned-docs/0.14.3/#/tabs )
Also a working Plunkr ( http://plnkr.co/edit/qAbUtv06ck64JCf8JaKp?p=preview ) 也是一个有效的Plunkr( http://plnkr.co/edit/qAbUtv06ck64JCf8JaKp?p=preview )
PS. PS。 Your code above works for versions 1.2.0 above. 上面的代码适用于上面的1.2.0版。 If you have the option to upgrade versions, you can do it as well :) 如果你有升级版本的选项,你也可以这样做:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.