Получение множественного выбора при перезагрузке страницы с помощью angular.js

0

У меня есть одна проблема. Я использую Angle.js ui-router для отображения вложенных представлений. В моем случае у меня есть одно родительское меню, и у него есть некоторые подменю. Позвольте мне объяснить мой код ниже.

dashboard.html:

<li ui-sref-active="active" ><a ui-sref="dashboard">Home</a></li>
<li  ui-sref-active="active">
<a ui-sref=".res.userrole">Resource Management</a>
</li>

Здесь Resource Management - это мое родительское меню, и его подменю приведены ниже.

res.html:

<tabset>
    <tab ui-sref="dashboard.res.userrole" ui-sref-active="active">
      <tab-heading>Add User Role</tab-heading>
    </tab>
    <!--<tab ui-sref="dashboard.res.course" ui-sref-active="active">
      <tab-heading>Add Course</tab-heading>
    </tab>-->
    <tab ui-sref="dashboard.res.class" ui-sref-active="active">
      <tab-heading>Add Class</tab-heading>
    </tab>
    <tab ui-sref="dashboard.res.section" ui-sref-active="active">
      <tab-heading>Add Section</tab-heading>
    </tab>
    <tab ui-sref="dashboard.res.session" ui-sref-active="active">
      <tab-heading>Add Session</tab-heading>
    </tab>
    <tab ui-sref="dashboard.res.unit" ui-sref-active="active">
      <tab-heading>Add Unit</tab-heading>
    </tab>
  </tabset>
  <div ui-view></div>

Loginroute.js:

.state('dashboard.res', {
        url: '/res',
        templateUrl: 'dashboardview/res.html',
        controller: 'resController'
    })
    .state('dashboard.res.userrole', {
        url: '/userrole',
        templateUrl: 'dashboardview/userrole.html',
        controller: 'resourceuserroleController'
    })
    .state('dashboard.res.class', {
        url: '/class',
        templateUrl: 'dashboardview/class.html',
        controller: 'resourceclassController'
    })
    .state('dashboard.res.section', {
        url: '/section',
        templateUrl: 'dashboardview/section.html',
        controller: 'resourcesectionController'
    })
    .state('dashboard.res.session', {
        url: '/session',
        templateUrl: 'dashboardview/session.html',
        controller: 'resourceSessionController'
    })
    .state('dashboard.res.unit', {
        url: '/unit',
        templateUrl: 'dashboardview/unit.html',
        controller: 'resourceunitController'
    })

Здесь моя проблема в том, что когда я перезагружаю любую страницу из вышеуказанного подменю, первое подменю ("ie-Add User Role") становится активным классом вместе с обновляемой страницей подменю. Так как я получаю два подменю являются активными. Мне нужно, если пользователь перезагружает любую страницу подменю, что заголовок подменю останется активным. Пожалуйста, помогите мне решить эту проблему.

  • 0
    привет, пожалуйста, рассмотрите возможность опубликовать планку, это будет очень полезно.
  • 0
    Хорошо, дай мне немного времени. Я готовлюсь.
Показать ещё 1 комментарий
Теги:
angular-ui-router

1 ответ

0

Вот идея с использованием $ state.includes().

например:

if state is /home/:id, Home tab will be activated.

if state is /home/sub/:id, Home and Home sub tabs will be activated

пример кода:

<ul class="nav navbar-nav">
<li ng-class="{active: $state.includes('home')}" class="active"><a ui-sref="home" href="/">Home</a></li>
<li ng-class="{active: $state.includes('home.sub')}" ><a ui-sref="home.sub" href="/">Home sub</a></li>
<li ng-class="{active: $state.includes('reports')}" ><a ui-sref="reports" href="/admin/reports">Reports</a></li>
<li ng-class="{active: $state.includes('users')}" ><a ui-sref="users" href="/admin/users">Users</a></li>            
<li ng-class="{active: $state.includes('groups')}" ><a ui-sref="groups" href="/admin/groups">Groups</a></li>            

Надеюсь, это поможет вашему делу.

  • 0
    Я не получаю ваш комментарий. У меня проблема с детским меню.
  • 0
    @subhra, насколько я понимаю, вы хотите активировать дочернее меню и его родительское меню?
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню