Clever Geek Handbook

How to set ul li as active in css using angular js

I want to set the anchor tag ul li as set using angle symbols.

this is my sidebar code

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

I am using the master page from another header page, footer page, sidebar.html.

all html pages are displayed on the "master.hmtl" page using the ng-include command.

here is what i doubt about how to automatically activate the "ul" under the anchor tag "li" automatically on page load.

this code is used to show sidebar on my main page.

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

before I don't use the ng-include method, I use this code to automatically start "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>
+3


source to share


1 answer


Your best bet is to use angular. In the 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
    },
];

And instead of:

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

Just write this:

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

And it will be really easy to set the class active on the element you want, for example:



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

You can also use a 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
   }
}

and

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

So setting the value would be:

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


source






More articles:


All Articles