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

Question

我正在创建标签:

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

现在在其他内容中我也有按钮,当点击更新行并刷新该部分时.刷新时,它还会重置我当前所在的选项卡.因此,如果我是标签二并单击按钮,面板将刷新,我将返回标签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.