On key up event list show up in angular js

Question

 <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>

Answer 1

It works:

 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>

On key up event list show up in angular js

Question

1 answers

solution1
0 ACCPTED 2017-11-02 06:34:33

On key up event list show up in angular js

Question

1 answers

solution1 0 ACCPTED 2017-11-02 06:34:33

solution1
0 ACCPTED 2017-11-02 06:34:33