0

バーがあり、navバーの任意のタブをクリックすると、navそのタブに移動します。

<section id="tabs">
    <div class="mob-nav"> 
        <div class="nav nav-tabs nav-fill nav-tabs-scroll" id="nav-tab" role="tablist"> 
            <!-- N add new class nav-tabs-scroll -->
            <a class="nav-item nav-link" style="padding-top: 10px;"
               ng-class="{ active: $index == 0 }"
               id="nav-{{menuTab.menuURL}}-tab"
               data-toggle="{{menuTab.dataToggle}}"
               data-target="#{{menuTab.menuURL}}"
               href="#{{menuTab.menuURL}}" role="tab"
               aria-controls="nav-{{menuTab.menuURL}}"
               ng-repeat="menuTab in menuList">
            </a>
        </div>
    </div>
</section>
<!-- Tab Details -->
<section id="tabs">
    <div class="">
        <div class="">
            <div class="mb-d-150">
                <div class="tab-content py-3 px-sm-0 pl-0 pr-0"
                     id="nav-tabContent"> 
                    <!-- N removed py-3 class -->
                    <div class="tab-pane fade show"
                         ng-class="{ active: $index == 0 }"
                         id="{{menuTab.menuURL}}" role="tabpanel"
                         data-target="#{{menuTab.menuURL}}"
                         aria-labelledby="nav-{{menuTab.menuURL}}-tab"
                         ng-include="menuTab.colDef"
                         ng-repeat="menuTab in menuList">
                    </div>
                    <div class="tab-pane fade" id="changepass" role="tabpanel"
                         aria-labelledby="nav-about-tab"
                         ng-include="changePasswordTemplate">
                    </div>
                </div>    
            </div>
        </div>
    </div>
</section>

これはメニューリストの例です。

[{
    menuID: "USER LANDING PAGE"
    caption: "Dashboard"
    parent: "root"
    menuURL: "exampleModal"
    cssClass: "fas fa-cog fa-lg"
    cssParent: "nav navbar-nav"
    aClass: "customerLandingPageTemplate"
    SlNum: 98
    colDef: "/js/templates/user-landing-page.html"
    menuList: []
    dataToggle: "modal"
},{
    menuID: "USER QUERIES"
    caption: "USER QUERIES"
    parent: "root"
    menuURL: "user-queries"
    cssClass: "fas fa-comment-alt fa-lg"
    cssParent: "nav navbar-nav"
    aClass: "userQueriesTemplate"
    SlNum: 100
    colDef: "/js/templates/user-queries.html"
    menuList: []
    dataToggle: "tab"
}]

menuList を提供する angularjs の部分は次のとおりです。

GetData.async(CONFIG.urlMaker('ws/menulist?userid=' + userid)).then(function (data) {
    $scope.menuList = data;
    console.log($scope.menuList)
});

USER LANDING PAGEブラウザを更新すると、どこを更新しても常に に戻ります。しかし、ブラウザの更新時に、更新前のページを再読み込みする必要があります。

4

1 に答える 1