角度のjsでCSSでuliをアクティブに設定する方法

Question

ul liのアンカータグをanglejでアクティブに設定したいと思っています。

これは私が別のヘッダー、フッター、sidebar.htmlページからマスターページを使用しています、私のサイドバーコード

<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> 

です。

ng-includeコマンドを使用すると、すべてのhtmlページが「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;