在 angularjs 列表中使用键盘快捷键答案

【问题标题】：To use keyboard shortcut in list in angularjs在 angularjs 列表中使用键盘快捷键
【发布时间】：2018-04-15 18:33:42
【问题描述】：

<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 选择值。这样在过滤列表时我也可以使用键盘。

【问题讨论】：

@DudeSweet 你能帮我解决这个问题吗？

标签： javascript c# jquery asp.net angularjs

【解决方案1】：

你可以这样做（如果你不想使用任何库）：

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>

【讨论】：

这段代码运行良好，先生，但它没有从数据库中获取我的列表，因为它与第一个代码一起运行良好。
就像没有找到记录一样。列表没有被调用
就像你给了一个索引为 0,1,2 但我只有数据。
喜欢隐藏这个
$scope.Getallitem = function() { $scope.Store = []; $scope.Store[0] = {} $scope.Store[1] = {}; $scope.Store[2] = {}; $scope.Store[0].StoreName = "Test1"; $scope.Store[1].StoreName = "Test2"; $scope.Store[2].StoreName = "Test3"; } $scope.Getallitem(); console.log($scope.Store);