[英]In angular bootstrap tabs, how to cancel tab change?
我防止选项卡更改的解决方案是使用内置的禁用标志。 如果向选项卡添加 ng-click 处理程序,您仍然可以对事件做出反应。 如果禁用的样式对您没有问题,这将起作用 - 在您的用例中可能是这种情况。
<tab disabled="true" ng-click="warnUserNotSavedChanges()">
看看这个问题评论。 这对我帮助很大。
请将此选项卡解决方案使用以下代码,它对我有用。
//our root app component import {Component, NgModule, VERSION} from '@angular/core' import {BrowserModule} from '@angular/platform-browser' import { TabsModule } from 'ngx-bootstrap'; @Component({ selector: 'my-app', template: ` <tabset> <tab heading='Tab 1'>Tab 1 content</tab> <tab> <template tabHeading> <div (click)="tryToSwitch($event)"> Tab 2 </div> </template> Tab 2 content </tab> </tabset> `, }) export class App { tryToSwitch(e) { let result = confirm('Are you sure?'); if(!result) { e.stopPropagation(); } } } @NgModule({ imports: [ BrowserModule, TabsModule.forRoot() ], declarations: [ App ], bootstrap: [ App ] }) export class AppModule {}
假设您有 3 个选项卡并希望第三个选项卡不可点击。 然后你应该为可点击的选项卡添加一个deselect
属性,这样当取消选择事件发生时,他们检查我们试图切换到哪个选项卡,如果它是第三个选项卡,则阻止选项卡切换。
这仅适用于 ui-bootstrap 的更高版本,大约 0.12-0.14,不能确切地说:
template.html
<uib-tabset class="tab-animation" active="activeTab">
<uib-tab index="0" heading="Overview" id="overview" deselect="checkTab($event, $selectedIndex)"></uib-tab>
<uib-tab index="1" heading="Details" id="details" deselect="checkTab($event, $selectedIndex)"></uib-tab>
<uib-tab index="2" heading="Download" id="download"></uib-tab>
</uib-tabset>
controller.js
// Downloads tab shouldn't be clickable
$scope.checkTab = function($event, $selectedIndex) {
// $selectIndex is index of the tab, you're switching to
if ($selectedIndex == 2) { // last tab is non-switchable
$event.preventDefault();
}
};
将ng-click
指令应用于每个选项卡:
<tab ng-click="checkChange($event)">
然后preventDefault();
:
$scope.checkChange = function($e) {
// check if tab can be changed
$e.preventDefault();
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.