在Angularjs中触发enter按钮后如何在文本框中搜索记录？
在Angularjs中触发enter按钮后如何在文本框中搜索记录？
提问于 2017-01-17 18:42:59
在这段代码中，当我在文本框中输入它正在搜索的记录名称时，我需要在输入时搜索记录，然后单击enter按钮，它将搜索记录名称。
<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>回答 4
Stack Overflow用户
发布于 2017-01-17 18:48:27
<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>Stack Overflow用户
发布于 2017-01-17 18:57:24
你可以通过使用控制器内部的过滤器和点击按钮调用函数来轻松地完成这项工作。这里的$scope.Search是用来进行过滤的文本。item是对其执行筛选的项目的集合！
$scope.searchMe = function(){
$scope.items = $filter('filter')($scope.items, $scope.search);
}不要忘记在控制器中注入$filter。
Stack Overflow用户
发布于 2017-01-17 18:59:20
<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页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41694981
复制相关文章
相似问题
腾讯云开发者
