Question

这是Angular 1.5 app。我在index.html文件中编写了菜单栏，以使其在所有视图中保持通用。现在，菜单栏默认值设置为主屏幕 - ＆＃34;个人＆＃34;。其他网页＆＃39;名称不会出现在菜单栏中，而是存在一个图标来表示菜单栏中的那些页面。当用户导航到任何其他页面时，该特定页面的名称应显示在菜单栏中，其余页面应显示为菜单栏中的图标。

我如何实现这一目标这就是当前菜单的样子 -

这是我的<body> index.html文件。

    <body>
        <div class="page" id="page">
            <ul id="progress">
                <li class="active progress-li">
                  Personal 
                </li> 
                <li class="progress-li"> 
                  <a ng-href="#/school">
                    <i class="fa fa-building-o" aria-hidden="true"></i>
                  </a>
                </li>
                <li class="progress-li">
                  <a ng-href="#/pre-university">
                    <i class="fa fa-university" aria-hidden="true"></i>
                  </a>
                </li>
                <li class="progress-li">
                  <a ng-href="#/university">
                    <i class="fa fa-graduation-cap" aria-hidden="true"></i>
                  </a>
                </li>
                <li class="progress-li">
                  <a ng-href="#/extras">
                    <i class="fa fa-cubes" aria-hidden="true"></i>
                  </a>
                </li>
                <li class="progress-li">
                  <a ng-href="#/accolades">
                    <i class="fa fa-trophy" aria-hidden="true"></i>
                  </a>
                </li>
                <li class="progress-li-last">
                  <a ng-href="#/job">
                    <i class="fa fa-suitcase" aria-hidden="true"></i>
                  </a>
                </li>
            </ul>
            <main class="cf" ng-view></main>
        </div>
        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
        <script src="js/libs/angular/angular.min.js"></script>
        <script src="js/libs/angular/angular-route.min.js"></script>
        <script src="js/libs/angular/angular-animate.min.js"></script>
        <script src="js/libs/angular/angular-cookies.min.js"></script>  
</body>

AngularJS将菜单栏的文本替换为用户导航

0 个答案: