Question

我正在创建标签：

 <tabset class="content-tabset no-margin">
<tab ng-repeat="t in t.values" heading="{{t.name}}" active="t.active">
  //other stuff
</tab>
</tabset>

现在在其他内容中我也有按钮，当点击更新行并刷新该部分时。刷新时，它还会重置我当前所在的选项卡。因此，如果我是标签2并单击按钮，面板将刷新，我将返回标签1.如何防止这种情况发生？

Answer 1

使用localStorage。在选择标签上设置它。要获取当前选项卡的活动状态的布尔值，请使用ng-init。

<tabset class="content-tabset no-margin">
  <tab 
    ng-repeat="t in t.values" 
    heading="{{t.name}}" 
    ng-init="isActive = isActiveTab(t.name, $index)"
    active="isActive"
    select="setActiveTab(t.name)">
    //other stuff
  </tab>
</tabset>

在您的控制器中

$scope.setActiveTab = function( activeTab ){
    localStorage.setItem("activeTab", activeTab);
};

$scope.getActiveTab = function(){
    return localStorage.getItem("activeTab");
};

$scope.isActiveTab = function( tabName, index ){
    var activeTab = $scope.getActiveTab();
    return ( activeTab === tabName || ( activeTab === null && $index === 0 ) );
};

注意：由于您的t没有标签的唯一ID，因此名称应该是唯一的，以便正确检测活动标签。

参见示例JSFiddle。

Answer 2

每当刷新时，本地/范围变量都超出范围。因此，解决此问题的方法是使用JavaScript的会话存储/本地存储。

关闭浏览器后，会话存储将超出范围，而本地存储将持续值，直到窗口和浏览器生存期。

内部控制器：

$scope.selTab = sessionStorage.tabName; //On refresh it will fetch value from session storage

$scope.onClickTab = function(tabName){ //On click it will set the sessionStorage
    $scope.selTab = tabName;
    sessionStorage.tabName = tabName;
}

内部HTML 必须引用您的控制器

<ul class="nav nav-pills col-md-12 col-sm-12 col-xs-12{{active}}">
  <li ng-class ="{active:selTab=='tab1'}"><a href="#/tab1" ng-click="onClickTab('tab1')">Tab3</a></li>
  <li ng-class ="{active:selTab=='tab3'}"><a href="#/tab3" ng-click="onClickTab('tab3')">Tab3</a></li>
</ul>

Answer 3

您可以使用此程序包ui-router-tabs。点击链接https://github.com/rpocklin/ui-router-tabs。易于使用并完成工作。

Answer 4

我已使用本地存储

解决了这个问题

内部HTML：

            <ul class="nav">
                <li>
                    <a ng-click="goToManageUsers('manageUser')" ng-class="{'active': selectedTab == 'manageUser'}">
                        <i class="lnr lnr-home"></i>
                        <span>Manage User</span>
                    </a>
                </li>
                <li>
                    <a ng-click="goToManageRequest('manageImage')" ng-class="{'active': selectedTab == 'manageImage'}">
                        <i class="lnr lnr-home"></i>
                        <span>Manage Image</span>
                    </a>
                </li>
            </ul>

内部控制器：

$scope.selectedTab = localStorage.getItem('getActive');
$scope.goToManageUsers = function (user) {
    $scope.selectedTab = user;
    localStorage.setItem('getActive', user);

}
$scope.goToManageRequest = function (image) {
    $scope.selectedTab = image;
    localStorage.setItem('getActive', image);
}

Answer 5

要在Angular 2+中执行相同的操作，您还可以使用LocalStorage。这样的事情（我使用ng-bootstrap启用Bootstrap选项卡）：

HTML：

<ngb-tabset class="nav-fill" (tabChange)="tabChange($event)" [activeId]="activeTabId">
    <ngb-tab title="Tab 1" id="tab1">
        ...
    </ngb-tab>
    <ngb-tab title="Tab 2" id="tab2">
        ...
    </ngb-tab>
</ngb-tabset>

.ts：

import {NgbTabChangeEvent} from "@ng-bootstrap/ng-bootstrap";
... other imports

export class MyComponent {

    activeTabId: string;

    constructor() {
        this.activeTabId = localStorage.getItem("activeTab");
    }

    tabChange($event: NgbTabChangeEvent) {
        localStorage.setItem("activeTab", $event.nextId);
    }
}

如何在Angular JS中的刷新时设置bootstrap活动选项卡

5 个答案: