【发布时间】：2018-06-21 14:48:07
【问题描述】：
实际上，我已经在我的应用程序中使用<ul> 和<li> 元素实现了一个自定义下拉菜单。现在我可以通过使用鼠标单击来选择下拉值，但作为功能要求的一部分，用户也可以使用回车键来选择下拉值。因此，为此，我将ng-keypress 指令与ng-mousedown 绑定在<li> 元素上，但在这里我可以使用鼠标单击而不是通过输入回车键来选择下拉值。请不要将这个问题视为重复，因为我在经历了许多现有线程并且没有得到完美答案后提出这个问题。在这里我也发布了我的整个代码库。请看一次。非常感谢。
这里选择的值只显示在搜索输入字段的上方，如下所示
这是我的代码库 -
var appOne = angular.module('appOne', ['ngRoute']);
appOne.directive('myEnter', function () {
return function (scope, element, attrs) {
element.bind("keydown keypress", function (event) {
if (event.which === 13) {
console.log("******From myEnter directive******");
event.preventDefault();
}
});
};
});
appOne.controller('controllerOne', function ($scope, $filter) {
$scope.seriesSelected = [];
var i = 0;
$scope.startsWith = function (actual, expected) {
i++;
var lowerStr = (actual + "").toLowerCase();
var j = lowerStr.indexOf(expected.toLowerCase()) === 0;
if (i === 5) {
$scope.isShowDropDown();
i = 0;
}
return j;
}
$scope.isShowDropDown = function () {
var e1 = angular.element(document.querySelector('#versionsId'));
var k = 0;
var column1RelArray = $('#versionsId li').map(function () {
k++;
if (k === 3) {
return false;
}
return $(this).hasClass('versionValClass');
});
if (column1RelArray.length === 0) {
e1.removeClass('open');
}
if (column1RelArray.length > 0) {
e1.addClass('open');
}
}
$scope.showDropDown = function (event) {
var e1 = angular.element(document.querySelector('#versionsId'));
if (!e1.hasClass('open')) {
e1.addClass('open');
}
}
$scope.versionList1 = [
{
"id": "217233",
"value": "16.1",
"index": "0",
"type": "Class"
},
{
"id": "217220",
"value": "12.2",
"index": "1",
"type": "Class"
},
{
"id": "217229",
"value": "13.7",
"index": "2",
"type": "Class"
},
{
"id": "212675",
"value": "8.123",
"index": "3",
"type": "Class"
},
{
"id": "212689",
"value": "16.123",
"index": "4",
"type": "Class"
}
];
$scope.versionList = $scope.versionList1.slice(0);
$scope.selecteSeries = function (indx) {
$scope.filterSeries.value = '';
$scope.seriesSelected.push($scope.versionList[indx]);
}
$scope.selecteSeriesOnPressEnter = function (indx, event) {
console.log("keycode is" + event.keyCode);
if (event.keyCode === 13) {
$scope.filterSeries.value = '';
$scope.seriesSelected.push($scope.versionList[indx]);
}
}
$('ul#versionsId').on("mouseenter", "li", function () {
$(this).addClass('selected').siblings().removeClass('selected');
});
$('input#searchField').keydown(function (e) {
var $listItems = $('ul#versionsId li');
var key = e.keyCode,
$selected = $listItems.filter('.selected'),
$current;
if (key != 40 && key != 38) return;
$listItems.removeClass('selected');
if (key == 40) // Down key
{
if (!$selected.length || $selected.is(':last-child')) {
$current = $listItems.eq(0);
} else {
$current = $selected.next();
}
} else if (key == 38) // Up key
{
if (!$selected.length || $selected.is(':first-child')) {
$current = $listItems.last();
} else {
$current = $selected.prev();
}
}
$current.addClass('selected');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-filter-filter-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" role="application" type="text/javascript"></script>
<script type="text/javascript" src="myApp.js"></script>
<style>
.versionsId {
display: none;
position: absolute;
width: 28%;
z-index: 99;
border: 0 1px 1px 1px solid #ddd;
border: 1px solid #ddd;
min-height: 249px;
max-height: 250px;
overflow: auto;
background: #fff;
margin-top: 0px;
margin-left: 52px;
}
#selectedVers {
list-style-type: none;
}
input:focus {
outline: none;
outline: 0;
border: 0;
border-bottom: 2px solid;
}
.versionsId.open {
display: block;
}
/*.versionsId li:hover {
background: #aaa;
}*/
.selected {
background: #aaa;
}
</style>
</head>
<body ng-app="appOne" ng-controller="controllerOne">
<div>
<ul id="selectedVers">
<li ng-repeat='s in seriesSelected'> {{ s.value }} </li>
</ul>
</div>
<label>Search: <input id="searchField" ng-model="filterSeries.value" ng-keypress='showDropDown($event);' style="border:solid 0 0 1px 0;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 2px;border-left-width: 0px;"></label>
<div>
<ul id="versionsId" class="versionsId" style="padding-left: 4px;">
<li ng-repeat='v in versionList | filter : filterSeries : startsWith' ng-class="{'selected': $first}" tabindex="{{versionList.indexOf(v)}}" class="versionValClass" ng-if='seriesSelected.indexOf(v) < 0 ' ng-mousedown='selecteSeries(versionList.indexOf(v))' ng-keypress='selecteSeriesOnPressEnter(versionList.indexOf(v), $event);'> {{ v.value }} </li>
</ul>
</div>
</body>
</html>【问题讨论】：
标签： jquery html angularjs angularjs-directive angularjs-scope