AngularJS中ng-model如何实现非实时同步
2016-09-03 17:28
645 查看
项目中有个很简单的小bug,输入框的值绑定了ng-model,但是需要实现改变输入框的值时不更新ng-model。
做了个小demo模拟,在输入框中进行输入时,Hello后的字符串并不发生改变,当输入框失去焦点时,Hello {{name}}发生改变。
ng-model-options是angular-1.3新出的一个指令,允许我们控制ng-model何时进行同步操作。
比如:1、当某个确定的事件被触发时;2、在指定的防抖动延迟时间之后,视图值会在指定的时间之后被同步更新到模型;
ng-model-options = "{updateOn:'blur'}"
表示当输入框失去焦点时,更新ng-model的值;
ng-model-options = "{debounce:1000}"
表示当输入框输入字符后,延时1s更新ng-model的值;
参考网址:http://www.tuicool.com/articles/uyuuYz
做了个小demo模拟,在输入框中进行输入时,Hello后的字符串并不发生改变,当输入框失去焦点时,Hello {{name}}发生改变。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body ng-app="myApp"> <input type="text" ng-model="name" ng-model-options = "{updateOn:'blur'}" /> <p>Hello {{name}}!</p> <script src="node_modules/angular/angular.js"></script> <script type="text/javascript"> (function(window){ var app = angular.module('myApp', []); })(window); </script> </body> </html>
ng-model-options是angular-1.3新出的一个指令,允许我们控制ng-model何时进行同步操作。
比如:1、当某个确定的事件被触发时;2、在指定的防抖动延迟时间之后,视图值会在指定的时间之后被同步更新到模型;
ng-model-options = "{updateOn:'blur'}"
表示当输入框失去焦点时,更新ng-model的值;
ng-model-options = "{debounce:1000}"
表示当输入框输入字符后,延时1s更新ng-model的值;
参考网址:http://www.tuicool.com/articles/uyuuYz
相关文章推荐
- AngularJS 2 中如何实现ng-bind-html
- angularJs中ng-model-options设置数据同步的方法
- AngularJS 2 中如何实现ng-bind-html
- angularjs-数据同步时机ng-model-options
- 如何用angularjs制作一个完整的表格之三__在ng-repeat中使用ng-model
- AngularJs使用ng-model-options设置数据同步时机提高网站性能
- 深入了解Angularjs指令中的 [(ngModel)]的实现原理
- AngularJS使用 ng-disabled 属性与ng-model搭配,实现禁用button效果
- 如何用angularjs制作一个完整的表格之四__自定义ng-model标签的属性使其支持input之外的html元素
- Flex RemoteObject 对像如何实现同步执行
- 如何实现两个数据库的同步?
- 如何实现两个数据库同步
- ASP.NET MVC:如何实现一个自己的ModelBinder?
- ASP.NET MVC:如何实现一个自己的ModelBinder?
- C/S结构中如何实现服务端与客户端的同步,实现动态刷新
- ExtJS 的 Grid中 如何让要让CheckboxSelectionModel 实现多选
- 如何用PV原语实现进程间的互斥与同步(转载)
- 如何通过触发器实现数据库的即时同步
- 如何应用Asp.Net Mvc内建功能(DefaultModelBinder)实现简单类型、复杂类型、集合类型,以及字典类型的自动绑定
- 如何使用 PDI 和 Oracle CDC 来实现Oracle 数据库向其他数据库的数据同步