Javascript AngularJS在用户导航时替换菜单栏的文本_Javascript_Jquery_Html_Css_Angularjs

Javascript AngularJS在用户导航时替换菜单栏的文本

javascript jquery html css angularjs

Javascript AngularJS在用户导航时替换菜单栏的文本,javascript,jquery,html,css,angularjs,Javascript,Jquery,Html,Css,Angularjs,这是Angular 1.5应用程序。我在index.html文件中编写了菜单栏，以使其在所有视图中保持通用。现在，菜单栏默认值设置为主屏幕-“个人”。菜单栏中不显示其他网页的名称，而是显示一个图标来表示菜单栏中的这些网页。当用户导航到任何其他页面时，该特定页面的名称应显示在菜单栏中，其余页面应显示为菜单栏中的图标如何实现这一点这就是菜单当前的样子- 这是我的index.html文件的 <body> <div class="page" id="pa

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

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

这是我的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>




个人的