如何在隱藏和可見的情況下搜索值？

在下面的代碼中，我給出了三個名爲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

如何在隱藏和可見的情況下搜索值？

回答

相關問題