我在ui-tab
应用程序中使用angular
。我有2个标签页(tab1和tab2),并且当tab2中有一个按钮时,我想以编程方式将tab1设置为活动标签。
这是我的html代码:
<uib-tabset active="active" justified="true">
<uib-tab id="tab1" index="0" heading="Tab 1" ng-click="active= 0">
<!-- content1 -->
</uib-tab>
<uib-tab id="tab2" index="1" heading="Tab 2" ng-click="active= 1">
<!-- content2 -->
<button ng-click="goToTab1()"> Go to tab 1</button>
</uib-tab>
</uib-tabset>
这是
goToTab1()
实现:$scope.goToTab1 = function() {
angular.element(document.querySelector("#tab1")).removeClass("active");
angular.element(document.querySelector("#tab2")).addClass("active");
}
我的问题:
当我单击按钮(在tab2中)时,选择了tab1,但显示的内容仍然是tab2的内容。同样,当我单击tab2之后,什么也没有发生,直到再次单击tab1,然后再单击tab2才起作用。
编辑
我已经在该issue中尝试过该解决方案,但是遇到了同样的问题。
另外,当我直接在
ng-click
中更改有效值时,它根本没有任何作用<button ng-click="active = 0"> Go to tab 1</button>
最佳答案
<uib-tabset active="current" justified="true">
<uib-tab id="tab1" index="0" heading="Tab 1" ng-click="current = 0">
<!-- content1 -->
</uib-tab>
<uib-tab id="tab2" index="1" heading="Tab 2" ng-click="current = 1">
<!-- content2 -->
<button ng-click="goToTab1()"> Go to tab 1</button>
</uib-tab>
</uib-tabset>
$scope.goToTab1 = function() {
$scope.current = 0;
};
关于javascript - angular-ui-tabset:更改事件的标签内容,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44282314/