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

发布时间：2020-12-17 17:38:45 所属栏目：安全来源：网络整理

导读：我正在创建标签： tabset class="content-tabset no-margin"tab ng-repeat="t in t.values" heading="{{t.name}}" active="t.active" //other stuff/tab/tabset 现在在其他内容中我也有按钮,当点击更新行并刷新该部分时.刷新时,它还会重置我当前所在的选项卡

我正在创建标签：

<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>

并在你的控制器

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

注意：由于您的选项卡没有唯一ID,因此名称应该是唯一的,以便正确检测活动选项卡.

见例JSFiddle.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!