Question

我想将ul li锚标记设置为与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>

我正在使用来自不同页眉，页脚，侧边栏页面的母版页。

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

这里我怀疑的是如何在页面加载时自动为“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;

如何使用角度js将ul li设置为css中的活动状态

1 个答案: