Question

在下面的代码中我有要搜索的值，这里如果我在搜索框中键入值正在搜索，我需要在输入时搜索，然后在输入字段中单击输入按钮。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
    <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
    <script>
        $(document).ready(function () {

        });
    </script>
    <script>
        var app = angular.module('myapp', []);
        app.controller('myctrl', function ($scope) {
          $scope.collectionCopy = [];
          $scope.hided = false;
            $scope.collection = [
                { Google: 'Dhoni', Facebook: 'Simla', Twitter: '5000' },
                { Google: 'Kohli', Facebook: 'Manali', Twitter: '15000' },
                { Google: 'Virat', Facebook: 'Rajasthan', Twitter: '35000' },
                { Google: 'Yuvraj', Facebook: 'Kerala', Twitter: '35000' },
                { Google: 'Singh', Facebook: 'Mysore', Twitter: '35000' },
                { Google: 'Murali', Facebook: 'OOTY', Twitter: '20000' },
                { Google: 'Vijay', Facebook: 'Goa', Twitter: '20000' }
            ];
            //Object to hold user input
            $scope.userInput = {};
            //fetch the value and assign to UserInput variable
            $scope.search = function (event) {
                if (event.keyCode == 13) {
                    $scope.userInput = $scope.Google;
                }
                else
                {
                  $scope.userInput = $scope.Google;
                }


            }
            angular.copy($scope.collection,$scope.collectionCopy);

            $scope.hide = function()
            {
                $(".col2").toggle(1000);
              angular.copy($scope.collection,$scope.collectionCopy);
              if($scope.hided == false)
              {
                for(var i = 0; i < $scope.collectionCopy.length; i++) {
                    var obj = $scope.collectionCopy[i];

                    //if(listToDelete.indexOf(obj.id) !== -1) {
                        delete obj['Facebook'];
                        delete obj['Twitter'];

                    //}
                }
                $scope.hided = true;
              }
              else
              {
                angular.copy($scope.collection,$scope.collectionCopy);
                $scope.hided = false;
              }
            }


        });
    </script>
</head>
<body ng-app="myapp">
    <div ng-controller="myctrl">
        <input type="text" class="form-control" name="search" placeholder="Enter keyword to search" ng-model="Google" ng-keyup="search($event)" style="background-color:#5b2c2c;color:white;">
        <input type="button" value="Search" ng-click="search()">
        <table class="table" border="1" style="margin:0;margin-left:90px;background-color:white;width:80%;border:5px solid green">
            <thead>
                <tr>
                    <th ng-click="hide()" class="col1"><a>Google</a></th>
                    <th ng-hide="hided" class="col2"><a>Facebook</a></th>
                    <th ng-hide="hided" class="col2"><a>Twitter</a></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="record in collectionCopy | filter:userInput" ng-class-even="'stripped'">
                    <td >{{record.Google}}</td>
                    <td ng-hide="hided"  class="col2">{{record.Facebook}}</td>
                    <td ng-hide="hided"  class="col2">{{record.Twitter}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Answer 1

在搜索功能中，您正在搜索输入密钥，但您也在搜索其他情况。我创建了搜索功能，只有在按下回车键或点击按钮时才会触发该功能（点击按钮也可以点击更改）

See this edited plunkr

$scope.search = function (event) {
                if (event.keyCode == 13) {
                    $scope.searcher();
                }
            }
            $scope.searcher = function() {
              $scope.userInput = $scope.Google;
            }

 <input type="button" value="Search" ng-click="searcher()">

如何在键入后按文本框中的输入按钮搜索值

1 个答案: