Wie Datensätze in Textfeld nach dem Auslösen der Schaltfläche in Angularjs suchen?

Question

In diesem Code, wenn ich den Datensatznamen eintippe, die es in einem Textfeld sucht, muss ich den Datensatz durchsuchen, wenn ich tippe und auf die Eingabetaste klicke, sollte es den Datensatznamen suchen.

<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

Sie können es leicht durch Filter im Controller und auf Klick auf die Funktionstaste Anruf. Hier $ scope.Search ist ein Text, mit dem ein Filter erstellt wird. und item ist ein Element, auf dem der Filter ausgeführt wird!

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

Vergessen Sie nicht, $ Filter in den Controller zu injizieren.

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