creating horizontal menu with angularjs

Question

I want to create a menu like this but without using ng-repeat:

<ul class="sidebar-navi">
    <li ng-repeat="item in items" ng-click="showChilds(item)">
        <a href="" class="sidebar-nav-menu"><i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>{{item.name}}</a>
        <ul>
            <li ng-show="item.active">
                <span>First</span>
            </li>
            <li ng-show="item.active">
                <span>Second</span>
            </li>
        </ul>
    </li>
</ul>

the problem is that I didn't find a way to pass parameter to this function showChilds (the current li) I tried to work with id but it didn't work:

                    <ul class="sidebar-navi">
                        <li id="first" ng-click="showChilds(first)">
                            <a href="" class="sidebar-nav-menu"><i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>1</a>
                            <ul>
                                <li ng-show="first.active">
                                    <span>First</span>
                                </li>
                                <li ng-show="first.active">
                                    <span>Second</span>
                                </li>
                            </ul>
                        </li>
                        <li id="second" ng-click="showChilds(second)">
                            <a href="" class="sidebar-nav-menu"><i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>2</a>
                            <ul>
                                <li ng-show="second.active">
                                    <span>First</span>
                                </li>
                                <li ng-show="second.active">
                                    <span>Second</span>
                                </li>
                            </ul>
                        </li>
                    </ul>

and my controller will contain only this function

  $scope.showChilds = function (item) {
    item.active = !item.active
  }

I don't want to use $scope.items anymore

where is your code without ng-repeat?

Sajeetharan
– Sajeetharan

2016-11-16 16:45:04 +00:00
Commented Nov 16, 2016 at 16:45 — Sajeetharan
– Sajeetharan, Commented Nov 16, 2016 at 16:45
where do you set the value of item? It's a user input?

Hosar
– Hosar

2016-11-16 16:49:54 +00:00
Commented Nov 16, 2016 at 16:49 — Hosar
– Hosar, Commented Nov 16, 2016 at 16:49
please check the update

Rajeun
– Rajeun

2016-11-16 16:51:10 +00:00
Commented Nov 16, 2016 at 16:51 — Rajeun
– Rajeun, Commented Nov 16, 2016 at 16:51

user3249448 · Accepted Answer · 2016-11-16 17:46:14Z

1

I have updated your HTML. If you are not using ng-repeat then you can use ng-init to initialize one variable and toggle that variable on ng-click to show/hide sub menus. Your updated sample is here

 <ul class="sidebar-navi">
                    <li id="first" ng-click="first = !first" ng-init="first = false">
                        <a href="" class="sidebar-nav-menu"><i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>1</a>
                        <ul>
                            <li ng-show="first">
                                <span>First</span>
                            </li>
                            <li ng-show="first">
                                <span>Second</span>
                            </li>
                        </ul>
                    </li>
                    <li id="second" ng-click="second = !second" ng-init="second = false">
                        <a href="" class="sidebar-nav-menu"><i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>2</a>
                        <ul>
                            <li ng-show="second">
                                <span>First</span>
                            </li>
                            <li ng-show="second">
                                <span>Second</span>
                            </li>
                        </ul>
                    </li>
                </ul>

edited Nov 16, 2016 at 17:46

answered Nov 16, 2016 at 17:12

user3249448

1,4192 gold badges15 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rajeun Over a year ago

I don't want to use items list anymore I want to use only html please check the update

Collectives™ on Stack Overflow

creating horizontal menu with angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related