仅显示页面AngularJS上的特定选项卡

show only specific tabs on page AngularJS

本文关键字：选项 显示 AngularJS      更新时间：2023-09-26

我想要一个通用的index.html页面，其中有指向所有模板html和菜单选项卡的链接。我只想根据用户单击的选项卡显示特定的选项卡。假设有3个菜单栏选项卡，1。登录2。寄存器3。电影

我只想在用户登录时显示电影选项卡。

这是我的示例index.html。

    <!DOCTYPE html>
<html ng-app="movieflix">
<head>
    <!-- bower:css -->
    <!-- endinject -->
    <!-- vendor:css -->
    <!-- endinject -->
    <!-- inject:css -->
    <!-- endinject -->
    <!-- app:css -->
    <!-- endinject -->
</head>
<body class="main">
<header>
    <ul class="nav nav-pills">
        <li><a href="#/movies">Movies</a></li>
        <li><a href="#/login">Login</a></li>
        <li><a href="#/register">Register</a></li>
    </ul>
</header>
<section ng-view>

</section>
<!-- bower:js -->
<!-- endinject -->
<!-- vendor:js -->
<!-- endinject -->
<!-- inject:js -->
<!-- endinject -->
<!-- app:js -->
<!-- endinject -->
</body>
</html>

我试着使用控制器来检查用户的选择，但这不起作用。

任何帮助都将不胜感激。

为此，创建三个不同的标志来显示和隐藏选项卡。并根据用户选择更新该标志的值。

例如，

  1. 为标题标记创建一个导航控制器
  2. 在该控制器中，创建三个不同的标志并为其指定默认值。var displayLoginTab=true; var displayRegisterTab=false; displayMovieTab=false;

然后按照上面的修改你的html

<header ng-controller="navigationController"> <ul class="nav nav-pills"> <li ng-if="displayMovieTab"><a href="#/movies">Movies</a></li> <li ng-if="displayLoginTab"><a href="#/login">Login</a></li> <li ng-if="displayRegisterTab"><a href="#/register">Register</a></li> </ul> </header>

因为我们使用单独的控制器，所以从其他控制器尝试访问导航控制器变量或从任何其他控制器更新变量，并广播该更新。在navigationController中侦听该广播事件并更新该变量值。

为了实现这一点，u必须使用一个用于存储用户登录数据的服务，成功登录后，将数据存储为userData，并在控制器中通过检查userData来检查用户是否登录，然后将showTab变量设置为true或false，反之亦然，并在视图中使用此变量来显示或隐藏选项卡。。。注意：没有附加代码。。。

相关文章：