Я хочу создать простые функции меню переключения для выпадающего меню. Я забираю код из столбца стека, но он более важен для функциональности табуляции.
Итак, как мы можем это сделать. И будет ли какая-нибудь проблема, если я использую 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;
};
});
Вероятно, вы просто хотите изменить ng-click
с помощью ng-mouseover
:
ng-mouseover="select($index)"
Я также добавил ng-mouseleave
чтобы удалить любой выбор, когда вы покидаете элемент nav
Если вам нужен клик, и вы хотите, чтобы переключатель переключился (показать/скрыть), вам нужно изменить $scope.select
:
$scope.select= function(index) {
if ($scope.selected === index)
$scope.selected = null
else
$scope.selected = index;
};
переключить JSFiddle
Mouseover JSFiddle