angularjs中watch使用--实现项目中时时搜索
2016-05-17 14:31
501 查看
重点内容 :用ng-model 定义一个变量, 用watch方法进行时时的监听
html5中定义一个ng-model
js文件中首先给ng-model 一个初始值
*js文件实现watch方法, 进行变量的时时监听
js文件中初始化ng-model 例如:
js文件中实现watch方法的时时监听例如:
本人并没有介绍具体网络请求的实现, 会在接下来的文章中提及到, 另外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还有多中用法需要的亲们可以调研. ↩
相关文章推荐
- angularjs中的路由介绍详解 ui-route
- Angular学习(2)Directives
- AngularJS学习-(左侧导航栏筛选、input输入框筛选)
- AngularJS学习(1)Expressions
- AngularJs ng-repeat 必须注意的性能问题
- Angularjs中的事件广播 ―全面解析$broadcast,$emit,$on
- AngularJs 打开OA详细Dialog的实现
- angularjs中 如何给一个跳转的页面,在跳转时注册JS控制器
- AngularJs 第一个自定义指令编写
- AngularJs:Service、Factory、Provider依赖注入使用与区别
- 【AngularJS】学习笔记
- AngularJS with MVC4 CRUD
- Using AngularJS with .NET MVC 5
- 初识AngularJS
- AngularJS 路由:ng-route 与 ui-router
- AngularJS 指令详解(业界大牛的详细学习笔记)
- AngularJS学习记录-工具方法
- angularjs实现地址的三级联动
- AngularJS的学习--$on、$emit和$broadcast的使用
- angularjs 学习笔记