如何使用angularJS从自定义下拉列表中获取选定的值
Posted
技术标签:
【中文标题】如何使用angularJS从自定义下拉列表中获取选定的值【英文标题】：How to get selected values from custom drop-down using angularJS 【发布时间】：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>【问题讨论】：
【参考方案1】：我玩了很多 angular 来解决这个问题，但仍然没有运气，但暂时我用 JQuery 做了一些事情。
这是代码 sn-p -
var appOne = angular.module('appOne', ['ngRoute']);
appOne.controller('controllerOne', function ($scope, $filter, $http)
$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.selecteSeries = function (indx)
$scope.filterSeries.value = '';
$scope.seriesSelected.push($scope.versionList[indx]);
$('ul#versionsId').on("mouseenter", "li", function ()
$(this).addClass('selected').siblings().removeClass('selected');
);
$keypresselm = undefined;
$('input#searchField').keydown(function (e)
var $listItems = $('ul#versionsId li');
var key = e.keyCode,
$selected = $listItems.filter('.selected'),
$current;
if (key != 40 && key != 38 && key != 13) return;
$listItems.removeClass('selected');
if (key == 40) // Down key
if (!$selected.length || $selected.is(':last-child'))
$current = $listItems.eq(0);
else
$current = $selected.next();
// $keypresselm = $current;
else if (key == 38) // Up key
if (!$selected.length || $selected.is(':first-child'))
$current = $listItems.last();
else
$current = $selected.prev();
//$keypresselm = $current;
else if (key == 13)
$current = $listItems.eq(0);
var ind = $keypresselm.attr('key');
var e1 = angular.element(document.querySelector('#versionsId'));
e1.removeClass('open');
$scope.seriesSelected.push($scope.versionList[ind]);
$scope.filterSeries.value = '';
$scope.$apply();
$keypresselm = $current;
if ($current !== undefined)
$current.addClass('selected');
);
$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);
);<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-filter-filter-production</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/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="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></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();' 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" class="versionValClass" ng-if='seriesSelected.indexOf(v) < 0 ' ng-mousedown='selecteSeries(versionList.indexOf(v))' key="versionList.indexOf(v)"> v.value </li>
</ul>
</div>
<div>
<!--<label>SearchOne: <input ng-onkeyup="keyup()"></label>-->
<!--<label>SearchOne: <input ui-event="keyup: 'myFn($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>
</body>
</html>【讨论】：
以上是关于如何使用angularJS从自定义下拉列表中获取选定的值的主要内容，如果未能解决你的问题，请参考以下文章
如何从自定义列表视图中获取选定项目并在 toast 消息中打印？
如何获取json数组值并显示在angularjs的下拉列表中？