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

我正在将选项卡创建为：

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

//其他东西

现在，在这个其他东西中，我还有一个按钮，当点击它时，它会更新行并刷新该部分。当刷新发生时，它也会重置我当前所在的选项卡。

---

因此，如果我是第二个选项卡，单击按钮，面板将刷新，我将返回到第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>

注意：由于您的

t

没有选项卡的唯一ID，因此名称应该是唯一的，以便正确检测活动选项卡

---

请参见示例。

无论何时刷新，局部/范围变量都会超出范围。所以解决这个问题的方法是使用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;
}

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

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

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

您可以使用此软件包

ui路由器选项卡

。点击链接。易于使用并完成任务。

我使用本地存储解决了这个问题

内部HTML:

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

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

---

要在Angular 2+中执行同样的操作，还需要使用LocalStorage。类似这样的内容（我使用ng引导来启用引导选项卡）：

HTML:

---

按下按钮时，您可以发布调用的代码吗？什么是

t.active

值？选项卡或名称的ID？@Jonny抱歉，代码太长，因此我无法在此处发布代码。我正在调用angular.extend刷新我页面上绑定的不同项目。@rene t.active为true或false正常。编辑了我的答案，因此它将是

布尔值

。