单击菜单项时Angularjs 1.6显示/隐藏部分

Question

我是 AngularJS 的新手。我有像这样的导航项目的导航栏：

<div class="header-inner">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="nav-area">
                    <nav class="mainmenu">
                        <div class="collapse navbar-collapse">  
                            <ul class="nav navbar-nav">
                                <li><a href="#">Link 1</a></li>
                                <li><a href="#!/link2">Link 2</a></li>
                                <li><a href="#!/link3">Link 3</a></li>
                                <li><a href="#!/link4">Link 4</a></li>
                                <li><a href="#!/link5">Link 5</a></li>
                                <li><a href="#!/link6">Link 6</a></li>
                            </ul>
                        </div>
                    </nav>
               </div>
           </div>
       </div>
    </div>
</div>

和部分：

<section class="hero-area">
//some text
</section>

如何在单击链接 1 时显示部分，并在单击其余链接时隐藏。默认活动链接是“Link1”，所以我需要在页面启动时显示部分。

感谢您的帮助。

Answer 1

您可能想使用ui-router，它可以解决这个问题等等。它还允许您从书签中恢复活动页面（和其他参数）。

如果您喜欢快速和肮脏，您可以尝试使用范围变量：

<a ng-click="active_section='link 2'">Link 2</a> ... <section ng-show="active_section==='link 2'">

Answer 2

您是否尝试过使用 ng-click + ng-show（或 ng-hide）？

<div class="header-inner">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="nav-area">
                    <nav class="mainmenu">
                        <div class="collapse navbar-collapse">  
                            <ul class="nav navbar-nav">
                                <li><a href="#" data-ng-click="showSection = 1">Link 1</a></li>
                                <li><a href="#!/link2" data-ng-click="showSection = 2">Link 2</a></li>
                                <li><a href="#!/link3" data-ng-click="showSection = 3">Link 3</a></li>
                                <li><a href="#!/link4" data-ng-click="showSection = 4">Link 4</a></li>
                                <li><a href="#!/link5" data-ng-click="showSection = 5">Link 5</a></li>
                                <li><a href="#!/link6" data-ng-click="showSection = 6">Link 6</a></li>
                            </ul>
                        </div>
                    </nav>
               </div>
           </div>
       </div>
    </div>
</div>


<section class="hero-area" data-ng-init="showSection = 1" data-ng-show="showSection === 1">
//some text
</section>