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

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);
    }
}