Angularjs 左侧菜单链接颜色变化(以角度表示)

Angularjs 左侧菜单链接颜色变化(以角度表示),angularjs,Angularjs,对于我的角度应用程序,我创建了左导航菜单。点击链接,相应的页面打开。我的问题是我想把活动链接的颜色改成蓝色,而其他链接是白色的。当我点击菜单中的另一个链接时,那个链接应该是蓝色的,其余的都是白色的。 我不知道如何在这个角度。使用Jquery,对我来说很容易。但棱角分明让我紧张 我的左导航是 <div class="leftNavList"> <div class="leftNavManageHeading"><span "mSans300 fon

对于我的角度应用程序,我创建了左导航菜单。点击链接,相应的页面打开。我的问题是我想把活动链接的颜色改成蓝色,而其他链接是白色的。当我点击菜单中的另一个链接时,那个链接应该是蓝色的,其余的都是白色的。 我不知道如何在这个角度。使用Jquery,对我来说很容易。但棱角分明让我紧张

我的左导航是

<div class="leftNavList">
          <div class="leftNavManageHeading"><span "mSans300 font14">Manage</span></div>
          <ul class="nav manageNav">

             <li ng-click="isCollapsed2 = !isCollapsed2">
              <div class="listOuterWrapper">
                <div class="listInnerWraper">

                <span class="mSans300">Usage</span>

                </div>
              </div> 
             </li>              
             <li ng-click="isCollapsed3 = !isCollapsed3">
              <div class="listOuterWrapper">

                <span class="mSans300">Payment</span>
               </div> 
               <div class="listInnerWraper">
               <div collapse="!isCollapsed3">
                   <ul class="paymentNav mSans30 font14">
                     <li><a href="#/paymentMethod" class="">PaymentMethod</a></li>
                     <li><a href="#/paymentHistory" class="">PaymentHistory</a></li>

                   </ul>
                </div>
               </div>   
              </li>              
             <li ng-click="isCollapsed4 = !isCollapsed4">
              <div class="listOuterWrapper">
                <div class="listInnerWraper">

                  <span class="mSans300"><a href="#/editAccount" class="">Account</a></span>

                </div>
              </div>
             </li>                                             
          </ul>
        </div>

管理
  • 用法
  • 付款

步骤1:在ng init中声明一个变量

ng-init="activelink=0"
步骤2:现在在链接的ng cick中更改activelink的值

<li><a href="" ng-click="activelink=1"</a></li>
<li><a href="" ng-click="activelink=2"</a></li>

  • 我建议查看,它有活动状态(这些是应用程序的页面),可以从视图中更改所有这些css和状态,而不是在控制器中更改逻辑,并且有许多功能强大的工具可以让应用程序在更少的代码中更好地运行

    在导航中:

     <ul>
      <li ui-sref-active="active" class="item">
        <a href ui-sref="route1">route1</a>
      </li>
    </ul>
    

    就这样!当前活动状态/视图将对该li元素应用ui sref active=“active”类。其中“active”是应用的类名。

    您使用的是ngRoute还是ui路由器?一种简单的方法是使用,然后您可以检查位置是否与当前url相同,并使用ng类向元素添加一个类。
     <ul>
      <li ui-sref-active="active" class="item">
        <a href ui-sref="route1">route1</a>
      </li>
    </ul>