如何將ul li設置爲在角度js中活動的css

Question

我想將ul li anchor標記設置爲使用angularjs活動。

這是我的側邊欄的代碼

<ul class="nav nav-list"> 

    <li class=""> 
     <a href="#" class="dropdown-toggle"> 
      <i class="menu-icon fa fa-desktop"></i> 
      <span class="menu-text"> 
       Main Menu 
      </span> 
      <b class="arrow fa fa-angle-down"></b> 
     </a> 
     <b class="arrow"></b> 
     <ul class="submenu"> 

      <li class="" id="RoleID"> 
       <a href="Role.html"> 
        <i class="menu-icon fa fa-caret-right"></i> 
        Role 
       </a> 
       <b class="arrow"></b> 
      </li> 
      <li class="" id="UserID"> 
       <a href="user.html"> 
        <i class="menu-icon fa fa-caret-right"></i> 
        User 
       </a> 
       <b class="arrow"></b> 
      </li> 
      <li class="" id="countryID"> 
       <a href="country.html"> 
        <i class="menu-icon fa fa-caret-right"></i> 
        Country 
       </a> 
       <b class="arrow"></b> 
      </li> 


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

我使用的母版頁來自不同的頁眉，頁腳，sidebar.html頁。

所有的html頁面都使用ng-include命令顯示在「master.hmtl」頁面中。

這裏我的疑問是如何在頁面加載時自動爲「li」錨標記下的「ul」設置活動狀態。

此代碼用於在我的主頁面顯示側邊欄。

<div class="main-container ace-save-state" id="main-container"> 
     <script type="text/javascript"> 
      debugger; 
      try { ace.settings.loadState('main-container') } catch (e) { } 
     </script> 
     <div ng-include src="'sidebar.html'" class="sidebar responsive ace-save-state"> 
      <script type="text/javascript"> 
       try { ace.settings.loadState('sidebar') } catch (e) { } 
       $(function() { 
        // init plugin (with callback) 
        $('#NameID').clearSearch({ callback: function() { console.log("cleared"); } }); 
        $('#MUDescriptionID').clearSearch({ callback: function() { console.log("cleared"); } }); 
           }); 
      </script> 
     </div> 

     <!-- /.main-content --> 

    </div> 

在我沒有使用ng-include方法之前，我使用這段代碼來自動激活「li」。

<script> $(function() { 
         $("#sidebar").load("slidebar.html", function() { 
       $(".sidebar ul li ul li").closest("li").find(".active").removeClass("active"); 
       $("#ManageUnitID").addClass("active").parents(".nav li").addClass("active open"); 
      }); 
     }); 
</script> 

Answer 1

更好的方法是使用角度。在你的控制器：和

$scope.roles = [ 
    { 
     id: 'RoleID', 
     name: 'Role', 
     href: 'Role.html', 
     active: false 
    }, 
    { 
     id: 'UserID', 
     name: 'User', 
     href: 'user.html', 
     active: false 
    }, 
    { 
     id: 'countryID', 
     name: 'Country', 
     href: 'country.html', 
     active: false 
    }, 
]; 

代替：

<li class="" id="RoleID"> 
    <a href="Role.html"> 
     <i class="menu-icon fa fa-caret-right"></i> 
     Role 
    </a> 
    <b class="arrow"></b> 
</li> 
<li class="" id="UserID"> 
    <a href="user.html"> 
     <i class="menu-icon fa fa-caret-right"></i> 
     User 
    </a> 
    <b class="arrow"></b> 
</li> 
<li class="" id="countryID"> 
    <a href="country.html"> 
     <i class="menu-icon fa fa-caret-right"></i> 
     Country 
    </a> 
    <b class="arrow"></b> 
</li> 

就這樣寫：

<li ng-class="{'active': role.active}" ng-repeat="role in roles" id="{{role.id}}"> 
    <a href="{{role.href}}"> 
     <i class="menu-icon fa fa-caret-right"></i> 
     {{role.name}} 
    </a> 
    <b class="arrow"></b> 
</li> 

這將是很容易設置類活性你想要的元素上，例如：

$scope.roles[0].active = true; 

您還可以使用地圖：

$scope.roles = { 
    'RoleID': { 
     name: 'Role', 
     href: 'Role.html', 
     active: false 
    }, 
    'UserID': { 
     name: 'User', 
     href: 'user.html', 
     active: false 
    }, 
    'countryID': { 
     name: 'Country', 
     href: 'country.html', 
     active: false 
    } 
} 

和：

<li ng-class="{'active': role.active}" ng-repeat="(key, role) in roles" id="{{key}}"> 
    <a href="{{role.href}}"> 
     <i class="menu-icon fa fa-caret-right"></i> 
     {{role.name}} 
    </a> 
    <b class="arrow"></b> 
</li> 

所以設定值是：

$scope.roles['RoleID'].active = true;