angularJS中搜索框的用法
angularJS的强大数据绑定功能让一键搜索成为可能，摒弃繁琐的button,让我们一起看一下让喝让搜索逆袭！
首先，HTML页面引入input，
<div class="form-horizontal" ng-controller="ServiceController">
<form>
<label for="kw" class="sr-only">请输入您要搜索的关键字</label>
<div class="col-xs-4">
<input class="form-control" id="kw" placeholder="search..." ng-model="kw">
</div>
</form>
<button type="text" class="btn btn-warning pull-right header-adjust">导出Excel</button>
</div>
当然，借助H5，你的type="search"会更完美一点.
接下来，你要监听input搜索框的信息
app.controller('ServiceController', function($scope,) {
$scope.$watch('username', function(newUserName) {...}
}
这样，你就很好的监听了你的数据变化。但这同时会产生一个问题，高频率的监听会耗损你的效率，下面，我们做最后的完善，让数据"智能"监听。
app.controller('ServiceController', function($scope, $timeout, githubService) { // 添加了$timeout服务
var timeout;
$scope.$watch('username', function(newUserName) {
if (newUserName) { 11
// 如果在进度中有一个超时(timeout)
if (timeout) $timeout.cancel(timeout);
timeout = $timeout(function() {
githubService.events(newUserName)
.success(function(data,status){
$scope.events=data.data;
})
}, 350); }
}); });
ok,现在，如果用户两次输入之间有350 ms的间 隔,就推断用户已经完成了输入,然后开始向GitHub发送请求 。
优质内容筛选与推荐>>
1、对象和引用的区别
2、VirtualBox虚拟机下Linux CentOS6.9安装增强功能
3、IE浏览器上传文件后返回结果会自动弹出下载框
4、python 线程
5、CentoOS6.6安装netcat