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

在下面的代码中，我给出了三个名为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>

来源

2017-01-23 manideep

这个目前有点宽泛。你卡在哪里？你有没有为你的功能编写代码，但它不起作用？ – halfer

这是您需要的答案，将进一步解释这一点。

要求：

当我隐藏列应该仅搜索可见列（谷歌），当所有列都可见它应该搜索的所有列

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

来源

2017-01-23 11:20:58 Sravan

非常感谢朋友，其工作 – manideep

很高兴为您效劳。如果您获得足够的声誉，您可以接受并投票回答我的答案。 – Sravan

Hai sravan您的回答是正确的，在您的代码中，当我们在文本框中键入值时，它正在搜索，您可以帮助我，它应该搜索当我们在文本框中输入值，然后如果我们单击输入按钮它应该搜索 – manideep

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

回答

相关问题