Question

我正在为我的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>

谢谢！

Answer 1

对于所有导航添加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>

Answer 2

您可以使用ng-show，ng-if或ng-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>

默认是可选的

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

2 个答案:

JS

HTML