您的位置:首页 > Web前端 > AngularJS

angularjs中watch使用--实现项目中时时搜索

2016-05-17 14:31 495 查看
重点内容 :用ng-model 定义一个变量, 用watch方法进行时时的监听

html5中定义一个ng-model

js文件中首先给ng-model 一个初始值

*js文件实现watch方法, 进行变量的时时监听

代码块(项目中做的时时搜索为例)

html5中定义一个ng-model变量,也是一个搜索框的实现例如:

<ion-nav-buttons side="center">
<!-- 设置搜索框 -->
<input type="text"  class="form-control" id="name"
placeholder="请输入项目名称" style="height: 25px;margin-top:5px;padding-top:5px;text-align:left;line-height: 25px;" ng-model= "showName.item"ng-style="myWidth">
</ion-nav-buttons>


js文件中初始化ng-model 例如:

$scope.showName = {item:''};


js文件中实现watch方法的时时监听例如:

$scope.$watch('showName.item', function() {

``` 要实现的方法, 具体问题具体分析, 本人项目中这选择的是请求搜索的结果代码如下:
if($scope.showName.item != '') {

projectHTTP.search($scope.showName.item,function(data){

if(data.data != null && data.data.length != 0){

$scope.projectListName = data.data;
setUserJsonCache("searchList", $scope.projectListName);
} else {

$scope.projectListName = [];
}

});
}
});


脚注

生成一个脚注1.

本人并没有介绍具体网络请求的实现, 会在接下来的文章中提及到, 另外watch还有多中用法需要的亲们可以调研.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: