UI Bootstrap 选项卡在重新加载后保存活动选项卡

Question

我需要在页面重新加载后显示活动标签。我发现我需要将活动选项卡名称存储到会话或本地存储中。但对我来说这不起作用。这里是 html

<uib-tabset>
     <uib-tab active="active" ng-init="isActive = isActiveTab('Info', $index)" index="0" data-toggle="tab" href="#sectionInfo" 
     heading="Info" classes="tabovi" select="setActiveTab('Info')"></uib-tab>
     <uib-tab active="active" ng-init="isActive = isActiveTab('Info 2',$index)" index="1" data-toggle="tab" href="#sectionInfoTwo" 
     heading="Info 2" classes="tabovi" select="setActiveTab('Info')"></uib-tab>
</uib-tabset>

这是控制器

// Save active tab to localStorage
$scope.setActiveTab = function (activeTab) {
    sessionStorage.setItem("activeTab", activeTab);
};

// Get active tab from localStorage
$scope.getActiveTab = function () {
    return sessionStorage.getItem("activeTab");
};

// Check if current tab is active
$scope.isActiveTab = function (tabName, index) {
    var activeTab = $scope.getActiveTab();
    return (activeTab === tabName || (activeTab === null && index === 0));
};

谢谢

Answer 1

您需要存储索引而不是它的名称。参考以下代码片段：

HTML:

<uib-tabset active="active">
    <uib-tab index="0" data-toggle="tab" heading="Info" select="setActiveTab(0)" classes="tabovi"></uib-tab>
    <uib-tab index="1" data-toggle="tab" heading="Software config" select="setActiveTab(1)"></uib-tab>
    <uib-tab index="2" data-toggle="tab" heading="Hardware config" select="setActiveTab(2)"></uib-tab>
    <uib-tab index="3" data-toggle="tab" heading="Config" select="setActiveTab(3)"></uib-tab>
</uib-tabset>

Javascript:

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

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

// This will set last tab active automatically when page loaded
$scope.active = parseInt($scope.getActiveTab());

UI Bootstrap 选项卡在重新加载后保存活动选项卡

UI Bootstrap tabs save active tabs after reload

javascript

angularjs

twitter-bootstrap

ui.bootstrap