css - 如何使用angular js在css中将ul li设置为事件

Question

我想使用 angularjs 将 ul li anchor 标记设置为激活状态。

这是我的侧边栏代码

<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 页面的母版页。

使用 ng-include 命令，所有 html 页面都显示在“master.hmtl”页面中。

这里我的疑问是如何在页面加载时自动为“li” anchor 标记下的“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

更好的方法是使用 Angular 。在你的 Controller 中:

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

您还可以使用 map :

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