angularJs中ng-model-options设置数据同步的方法


Posted in Javascript onSeptember 30, 2018

后台请求任务量很大的时候,可以设置同步的时间和操作,

利用ng-model-options来实现,提高网站性能。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="angular.min.js"></script>
</head>
<body>
<div ng-app="module" ng-controller="ctrl">
<!--updateOn:blur,鼠标离开时同步更新scope数据-->
<!--debounce:5000,数据输入完成后5秒,同步更新scope数据-->
  <input type="text" ng-model="title" ng-model-options="{updateOn:'default blur',debounce:{default:2000,blur:0}}">
  <!--ng-model-options="{updateOn:'default blur',debounce:{default:2000,blur:0}}
  输入光标离开,立即更新,若不离开,2秒后更新
-->
  {{title}}
</div>
<script>
  var m = angular.module('module', []);
  m.controller('ctrl', ['$scope', function ($scope) {
  }]);
</script>
</body>
</html>

以上这篇angularJs中ng-model-options设置数据同步的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 序列化对象实现代码
Dec 18 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
javascript中字符串拼接需注意的问题
Jul 13 Javascript
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 #Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 #Javascript
使用angularjs.foreach时return的问题解决
Sep 30 #Javascript
angular将html代码输出为内容的实例
Sep 30 #Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 #Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 #Javascript
vue  自定义组件实现通讯录功能
Sep 30 #Javascript
You might like
实用函数9
2007/11/08 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
javascript demo 基本技巧
2009/12/18 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
nodejs基础知识
2017/02/03 NodeJs
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
python中的装饰器详解
2015/04/13 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
Python3最长回文子串算法示例
2019/03/04 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
html5读取本地文件示例代码
2014/04/22 HTML / CSS
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
毕业生在校学习的自我评价分享
2013/10/08 职场文书
女方婚礼新郎答谢词
2014/01/11 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
大学同学聚会感言
2015/07/30 职场文书