在键上事件列表中以角js显示

时间:2017-11-02 06:21:48

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

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

1 个答案:

答案 0 :(得分:0)

有效:

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>