Question

在下面的代码中，我给出了三个名为google，facebook和twitter的表格列。如果我点击谷歌，Facebook和Twitter列将隐藏和显示。

我需要搜索当我隐藏列时它应该只搜索可见列（Google），当所有列都可见时，它应该搜索所有列。

 <!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 () {
            $(".col1").click(function () {
                $(".col2").toggle(1000);
            });
        });
    </script>
    <script>
        var app = angular.module('myapp', []);
        app.controller('myctrl', function ($scope) {
            $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;
                }
            }
        });
    </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 class="col1"><a>Google</a></th>
                    <th class="col2"><a>Facebook</a></th>
                    <th class="col2"><a>Twitter</a></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="record in collection | filter:userInput" ng-class-even="'stripped'">
                    <td >{{record.Google}}</td>
                    <td class="col2">{{record.Facebook}}</td>
                    <td class="col2">{{record.Twitter}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Answer 1

以下是您的答案，将进一步解释。

<强>要求：

当我隐藏列时，它应该只搜索可见列（Google），当所有列都可见时，它应该搜索所有列

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

请运行以上代码段

Here is a Working DEMO

如何在隐藏和可见的情况下搜索值？

1 个答案: