AngularJS - 根据用户记录更改导航菜单

时间:2015-05-11 12:15:50

标签: angularjs

我正在为我的Web应用程序使用SpringBoot和Angular JS,我想知道根据用户记录更改导航菜单的好方法。

我将导航栏放在所有视图中,但我确定有更好的方法可以做到。

User.class

@Entity
public class Usuario implements Serializable {
@Enumerated(EnumType.STRING)
private Rol rol; -> This can be "UserA","UserB","UserC"
}

我的不同导航菜单是

UserA的导航

<nav id="nav">
        <ul>
            <li><a href="#/userA1">A1</a></li>
            <li><a href="#/userA2">A2</a></li>
            <li><a href="#/userA3">A3</a></li>
        </ul>
</nav>

UserB的导航

<nav id="nav">
        <ul>
            <li><a href="#/userB1">B1</a></li>
            <li><a href="#/userB2">B2</a></li>
            <li><a href="#/userB3">B3</a></li>
        </ul>
</nav>

UserC的导航

<nav id="nav">
        <ul>
            <li><a href="#/userC1">C1</a></li>
            <li><a href="#/userC2">C2</a></li>
            <li><a href="#/userC3">C3</a></li>
        </ul>
</nav>

谢谢!

2 个答案:

答案 0 :(得分:0)

对于所有导航添加ng-show并控制您的rol。并且您已将rol设置为 $ scope.role

<nav id="nav" ng-show="role=='userA'">
        <ul>
            <li><a href="#/userA1">A1</a></li>
            <li><a href="#/userA2">A2</a></li>
            <li><a href="#/userA3">A3</a></li>
        </ul>
</nav>

如果您不想使用ajax调用;您可以在jsp上设置$ scope.role值,并在用户更改结果时更改结果。您可以使用&#34; JSTL&#34;或者&#34; Jsp shortTag&#34; shortTag例子;

<nav id="nav" ng-show="<%=rol%>=='userC'">
        <ul>
            <li><a href="#/userC1">C1</a></li>
            <li><a href="#/userC2">C2</a></li>
            <li><a href="#/userC3">C3</a></li>
        </ul>
</nav>

答案 1 :(得分:0)

您可以使用ng-showng-ifng-switch。 Beter使用ng-if或ng-switch,因为它没有为其他角色创建html,而其他用户如果检查元素,则无法看到其他角色的链接。 ng-show只会隐藏(添加显示:无风格)

在控制器中获得角色

JS

$scope.role = $http.get("some url to get role");

HTML

<nav id="nav" ng-switch='role'>
    <ul ng-switch-when='userA'>
        <li><a href="#/userA1">A1</a></li>
        <li><a href="#/userA2">A2</a></li>
        <li><a href="#/userA3">A3</a></li>
    </ul>

    <ul ng-switch-when='userB'>
        <li><a href="#/userB1">B1</a></li>
        <li><a href="#/userB2">B2</a></li>
        <li><a href="#/userB3">B3</a></li>
    </ul>

    <ul ng-switch-when='userC'>
        <li><a href="#/userC1">C1</a></li>
        <li><a href="#/userC2">C2</a></li>
        <li><a href="#/userC3">C3</a></li>
    </ul>

    <ul ng-switch-default='userDefault'>
        <li><a href="#/userDefualt1">Default1</a></li>
        <li><a href="#/userDefault2">Default2</a></li>
        <li><a href="#/userDefault3">Default3</a></li>
    </ul>
</nav>

默认是可选的