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_07_理解instanceof实现原理
Oct 15 Javascript
javascript 随机展示头像实现代码
Dec 06 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
JS实现随机数生成算法示例代码
Aug 08 Javascript
js图片自动轮播代码分享(js图片轮播)
May 06 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 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
PHP安全性漫谈
2012/06/28 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
js实现移动端轮播图
2020/12/21 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
Python 实现集合Set的示例
2020/12/21 Python
采购经理岗位职责
2014/02/16 职场文书
明确岗位职责
2015/02/14 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
欢迎新生标语2015
2015/07/16 职场文书
Node.js实现断点续传
2021/06/23 Javascript
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS