文章/答案/技术大牛

发布

社区首页 >问答首页 >使用angular.js重新加载页面时获得多个选择

问使用angular.js重新加载页面时获得多个选择
EN

Stack Overflow用户

提问于 2015-11-09 05:44:03

回答 1查看 63关注 0票数 0

我有一个问题，我使用Angular.js ui-router来显示嵌套的views.In，我的情况是，我有一个父菜单，它有一些子菜单。下面让我解释一下我的代码。

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'
    })

这里我的问题是，当我重新加载上述子菜单的任何页面时，第一个子菜单(即添加用户角色)将得到活动类和刷新子菜单page.So，每次我得到两个子菜单是active.Here，如果用户正在重新加载任何子菜单页面，该子菜单标题将保持为active.Please，帮助我解决这个问题。

angular-ui-router

angularjs

回答 1

Stack Overflow用户

发布于 2015-11-09 08:19:58

下面是使用$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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33603159

复制

相似问题

问使用angular.js重新加载页面时获得多个选择
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用angular.js重新加载页面时获得多个选择EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用angular.js重新加载页面时获得多个选择
EN