Onkeyup 事件列表显示在 angularjs 中答案

【问题标题】：On key up event list show up in angular jsOnkeyup 事件列表显示在 angularjs 中
【发布时间】：2018-04-14 14:18:17
【问题描述】：

 <body>
        <div ng-app="mvcapp" ng-controller="AngularController">
            <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="sname"  >
            <ul id="myUL" ng-repeat="StoreList in Store| filter:{StoreName:sname}">
                <li ng-click="SelectedValue(StoreList.StoreName)">{{StoreList.StoreName}}</li>        
            </ul>
            <div ng-show="(Store|filter:sname).length==0" style="color:red;font-weight:bold">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) {

                        Getallitem()
                        function Getallitem() {

                            $http.get('/Coupons/GetStore').success(function (data) {
                                $scope.Store = data;
                            });
                        }

                    $scope.SelectedValue = function (item) {
                        document.getElementById("txtStorename").value = item;
                    }
                });   
        </script>
    </body>

【问题讨论】：

请解释您面临的问题！
先生列表在表单加载时弹出。在加载时文本框下方有一个下拉列表。我想要的是列表应该显示在文本框的 keyup 事件中。我找不到解决方案来做到这一点

标签： javascript c# angularjs asp.net-mvc model-view-controller

【解决方案1】：

有效：

angular.module('app', [])
  .controller('Controller', function($scope) {
    $scope.obj = {};
        $scope.obj.showList = false;
        
        $scope.Getallitem = function(){
            $scope.Store = []; 
            $scope.Store[0] = {}
            $scope.Store[1] = {};
            $scope.Store[0].StoreName = "Test1";
            $scope.Store[1].StoreName = "Test2";           
        }
         $scope.Getallitem();
         console.log($scope.Store);

        $scope.SelectedValue = function (item) {
            $scope.obj.showList = false;
            $scope.obj.sname = item;
        }
  })

<!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">
  <div ng-controller="Controller">
    <input type="text" ng-keyup="obj.showList = true;" 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:{StoreName:sname}">
      <li ng-click="SelectedValue(StoreList.StoreName)">{{StoreList.StoreName}}</li>
    </ul>
    <div ng-show="(Store|filter:obj.sname).length==0" style="color:red;font-weight:bold">No Result Found</div>
  </div>
</body>

</html>

【讨论】：

先生，我尝试了 scope.sname = item，但没有成功。
先生，这段代码运行良好，但问题在于清空列表应关闭的文本框，以及选择列表项时，列表应最小化为所选值
先生，这很完美，但我的列表来自数据库，并且我们对列表进行了硬编码，所以我如何在 scope.getallitem function() 中调用它
@AsadKapadia 就像您在代码中调用一样，我在 sn-p 中编辑了代码以显示其工作。
先生是否可以使用键盘（向上和向下键）导航列表。喜欢滚动列表