Angularjsに入力ボタンを押した後、テキストボックス内のレコードを検索する方法は？

Question

このコードでは、テキストボックスで検索しているレコード名を入力すると、入力時にレコードを検索して、入力ボタンをクリックしてレコード名を検索する必要があります。

<input type="text" class="form-control" name="search" placeholder="Enter keyword to search" ng-model="Google" style="background-color:#5b2c2c;color:white;"> 
<table class="table" border="1" style="margin:0;margin-left:90px;background-color:white;width:80%;border:5px solid green"> 
    <thead> 
     <tr> 
     <th><a>Google</a></th> 
     <th><a>Facebook</a></th> 
     <th><a>Twitter</a></th> 
     <th><a>Yahoo</a></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="record in collection | filter:Google" ng-class-even="'stripped'"> 
     <td>{{record.Google}}</td> 
     <td>{{record.Facebook}}</td> 
     <td>{{record.Twitter}}</td> 
     <td>{{record.Yahoo}}</td> 
     </tr> 
    </tbody> 
</table> 

<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' 
     } 
    ]; 
}); 
</script> 

Answer 1

<input type="text" class="form-control" name="search" placeholder="Enter keyword to search" ng-model="searchText" style="background-color:#5b2c2c;color:white;"> 
<button ng-click="Google=searchText">Search</button> 

Answer 2

あなたは簡単に、コントローラ内部で、ボタンのコール機能のクリック時にフィルタを使用することによってそれを行うことができます。ここで$ scope.Searchはフィルタが行われるテキストです。項目はフィルタが実行される項目のセットです！

$scope.searchMe = function(){ 
     $scope.items = $filter('filter')($scope.items, $scope.search); 
    } 

コントローラーに$ filterを注入するのを忘れないでください。

Answer 3

<input type="text" class="form-control" name="search" placeholder="Enter keyword to search" ng-model="searchText" style="background-color:#5b2c2c;color:white;"> 

<tr ng-repeat="record in collection | filter:Google" ng-class-even="'stripped'"> 
<button ng-click="Google.Facebook=searchText">Search</button> // filter facebook column only 
<button ng-click="Google=searchText">Search</button> // can filter any column