admin管理员组文章数量:1323737
I have a webpage with two angular ui tabs. 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:
- If the current active tab is "first" - make the "second" tab to be active.
- if the current active tab is "second" - make the "first" tab to be active.
Here is my (not) working example:
<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. This since I'm expecting that the variable will be placed on $scope
, while it's running on separated scope (of the tab-set). I tried to pass this issue with workaround by change this segment to active="$parent.$parent.selected"
- with no success.
So, the main problem is the swap()
function:
$scope.swap = function() {
alert($scope.selected);
if ($scope.selected == 1)
$scope.selected = 2;
else
$scope.selected = 1;
}
How should I do it right?
I have a webpage with two angular ui tabs. 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:
- If the current active tab is "first" - make the "second" tab to be active.
- if the current active tab is "second" - make the "first" tab to be active.
Here is my (not) working example: 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. This since I'm expecting that the variable will be placed on $scope
, while it's running on separated scope (of the tab-set). I tried to pass this issue with workaround by change this segment to active="$parent.$parent.selected"
- with no success.
So, the main problem is the swap()
function:
$scope.swap = function() {
alert($scope.selected);
if ($scope.selected == 1)
$scope.selected = 2;
else
$scope.selected = 1;
}
How should I do it right?
Share Improve this question edited Dec 4, 2018 at 3:56 Cœur 38.8k26 gold badges205 silver badges277 bronze badges asked Sep 13, 2016 at 7:14 No1Lives4EverNo1Lives4Ever 6,91323 gold badges90 silver badges156 bronze badges1 Answer
Reset to default 5You are using an old version of 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)
Also a working Plunkr (http://plnkr.co/edit/qAbUtv06ck64JCf8JaKp?p=preview)
PS. Your code above works for versions 1.2.0 above. If you have the option to upgrade versions, you can do it as well :)
本文标签: javascriptAngular UI tabschange active tab programmaticallyStack Overflow
版权声明:本文标题:javascript - Angular UI tabs - change active tab programmatically - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742119622a2421635.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论