在angularjs列表中使用键盘快捷键 [英] To use keyboard shortcut in list in angularjs
本文介绍了在angularjs列表中使用键盘快捷键的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<html>
<body>
<div ng-app="mvcapp" ng-controller="AngularController">
<input ng-keyup="obj.showList = true;" type="text" class="myInput form-control" name="txtStorename" id="txtStorename" placeholder="Search for Store.." title="Type in a Store" data-error-message="Please enter StoreName" ng-model="sname">
<ul ng-if="obj.showList" id="myUL" ng-repeat="StoreList in Store| filter:{StoreName:sname}">
<li ng-click="SelectedValue(StoreList.StoreName)" ng-cloak>{{StoreList.StoreName}}</li>
</ul>
<div ng-show="(Store|filter:sname).length==0" style="color:red;font-weight:bold" ng-cloak>No Result Found</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script>
var angular = angular.module('mvcapp', []);
angular.controller('AngularController', function ($scope, $http) {
$scope.obj = {};
$scope.obj.showList = false;
Getallitem()
function Getallitem() {
$http.get('/Coupons/GetStore').success(function (data) {
$scope.Store = data;
});
}
$scope.SelectedValue = function (item) {
$scope.sname = item;
$scope.obj.showList = false;
}
});
</script>
</body>
}
这是我在Angularjs中过滤列表的代码.这段代码一切都很好.我真正想要的是使用箭头键列表中的键盘，并使用enter选择值.这样我在过滤列表时也可以使用键盘.
This is my code for filtering list in Angularjs. Everything is fine with this code. What i actually want is to use keyboard in the list that is arrow keys and to select value using enter . so that while filtering list i can use keyboard too.
推荐答案
您可以执行以下操作(如果您不想使用任何库):
You can do something like this (If you don't want to use any library):
angular.module('app', [])
.controller('Controller', function($scope,$filter) {
$scope.obj = {};
$scope.obj.showList = false;
$scope.Getallitem = function() {
$scope.Store =[ 'Flipkart', 'Amazon', 'Snapdeal', 'Jabong', 'Trendin', 'Lenskart', 'Zovi', 'BabyOye', 'ShopMore24', 'BasicsLife', 'PrettySecrets', 'American Swan', 'ShopClues', 'FernsNPetals', 'Pepperfry', 'Koovs', 'FoodPanda', 'BookmyFlower', 'Printvenue', 'Amar Chitra Katha'] ;
}
$scope.Getallitem();
$scope.SelectedValue = function(item) {
$scope.obj.showList = false;
$scope.obj.sname = item;
}
$scope.open = function(index) {
var filteredContent = $filter('filter')($scope.Store,$scope.obj.sname);
if(typeof filteredContent[index] !== 'undefined'){
var StoreName = filteredContent[index];
$scope.SelectedValue(StoreName);
}
}
$scope.focusIndex = -1;
$scope.keys = [];
$scope.keys.push({
code: 13,
action: function() {
$scope.open($scope.focusIndex);
}
});
$scope.keys.push({
code: 38,
action: function() {
$scope.focusIndex--;
}
});
$scope.keys.push({
code: 40,
action: function() {
$scope.focusIndex++;
}
});
$scope.$watch('obj.sname', function() {
if(!$scope.obj.showList){
$scope.focusIndex = -1;
}
});
$scope.$on('keydown', function(msg, obj) {
var code = obj.code;
if(code != 40 && code != 38 && code != 13){
$scope.obj.showList = true;
}
var filteredContent = $filter('filter')($scope.Store,$scope.obj.sname);
$scope.keys.forEach(function(o) {
if (o.code !== code) {
return;
}
if(code == 40){
if (($scope.focusIndex + 1) >= filteredContent.length) {
return;
}
}else if(code == 38){
if ($scope.focusIndex <= 0) {
return;
}
}
o.action();
$scope.$apply();
});
});
})
.directive('keyTrap', function() {
return function(scope, elem) {
elem.bind('keydown', function(event) {
if(event.keyCode == 40 || event.keyCode == 38 || event.keyCode == 13){
event.preventDefault();
}
scope.$broadcast('keydown', {
code: event.keyCode
});
});
};
});
/* Styles go here */
li.record {
height: 25px;
background-color: lightgray;
margin: 10px;
padding: 10px;
width: 200px;
}
li.record-highlight {
height: 50px;
background-color: green;
margin: 10px;
padding: 10px;
width: 200px;
color: #fff;
}
<!DOCTYPE html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app" key-trap>
<div ng-controller="Controller">
<input type="text" class="myInput form-control" name="txtStorename" id="txtStorename" placeholder="Search for Store.." title="Type in a Store" data-error-message="Please enter StoreName" ng-model="obj.sname">
<ul ng-if="obj.sname && obj.showList" id="myUL" ng-repeat="StoreList in Store| filter:obj.sname">
<li class="record" ng-class="($index == focusIndex)?'record-highlight':''" ng-click="SelectedValue(StoreList)">{{StoreList}}</li>
</ul>
<div ng-show="(Store|filter:obj.sname).length==0" style="color:red;font-weight:bold">No Result Found</div>
</div>
</body>
</html>
这篇关于在angularjs列表中使用键盘快捷键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
