Переключить навигационное меню на ng-click

Question

Я хочу создать простые функции меню переключения для выпадающего меню. Я забираю код из столбца стека, но он более важен для функциональности табуляции.

Как мы можем это сделать. И будет ли какая-нибудь проблема, если я использую jquery для этой цели.

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> 

Угловая

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; 
    }; 
}); 

Answer 1

Возможно, вы просто хотите изменить ng-click с ng-mouseover:

ng-mouseover="select($index)" 

Я также добавил ng-mouseleave к убр е любой выбор, когда вы покидаете СЧА элемент

Если вам нужен щелчок, и вы хотите переключить щелчок (показать/скрыть) вы должны изменить $scope.select к:

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

тумблер щелчок JSFiddle

Mouseover JSFiddle