CODEWITHSUNDEEP
jqueryangularjs
Jitender
Jitender

Reputation: 7971

Toggle nav menu option on ng- click

I want to build simple toggle menu functionality for menu dropdown. I have pick up some code from the on of stack post but its more relevant to tab functionality.

So how can we get this done. And is there will be any issue if I use jquery for this purpose.

http://jsfiddle.net/3G7Kd/107/

<div ng-app='app' class="filters_ct" ng-controller="selectFilter">
    <ul class="nav">
        <li ng-repeat="filter in filters" ng-click="select($index)" ng-class="{sel: $index == selected}">
            <span class="filters_ct_status"></span>
            {{filter.name}}

            <ul class="subul" ng-if=filter.lists.length>
                <li ng-repeat="list in filter.lists">
                    {{list}}
                </li>
            </ul>
        </li>
    </ul>
</div>

Angular

var app = angular.module('app', []); 

app.controller('selectFilter', function($scope) {

    $scope.filters = [
            {
                "name": "service",
                'lists': ['service a','service b','service c','service d']
            },
            {
                'name': "about us",
                'lists': ['about us a','about us b','about us c','about us d']
            },
            {
                'name': "product",
                'lists': ['product a','product b','product c','product d']
            },
            {
                'name': "more",
                'lists': ['more a','more b','more c','more d']
            }
        ];
    $scope.selected = 0;

    $scope.select= function(index) {
       $scope.selected = index; 
    };
});

Upvotes: 0

Views: 188

Answers (1)

michelem
michelem

Reputation: 14590

Probably you just want to change ng-click with ng-mouseover:

ng-mouseover="select($index)"

I also added ng-mouseleave to remove any selection when you leave the nav element

If you need the click and you want the toggle click (show/hide) you have to change the $scope.select to:

$scope.select= function(index) {
   if ($scope.selected === index) 
       $scope.selected = null
   else
       $scope.selected = index; 
};

toggle click JSFiddle

Mouseover JSFiddle

Upvotes: 3

Related Questions