隠して見えるうちに値を検索するにはどうすればよいですか？

以下のコードでは、Google、facebook、twitterという3つの表の列を指定しました。 Googleをクリックすると、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あなたの答えはあなたのコードで、テキストボックスに値を入力している間に検索していますが、助けてください。テキストボックスに値を入力すると検索し、Enterボタンをクリックすると検索します – manideep

隠して見えるうちに値を検索するにはどうすればよいですか？

答えて

関連する問題