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 相关文章推荐
ext jquery 简单比较
Apr 07 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
js arguments对象应用介绍
Nov 28 Javascript
jQuery的each终止或跳过示例代码
Dec 12 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 Javascript
封装 axios+promise通用请求函数操作
Aug 11 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
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
Python实现抢购IPhone手机
2018/02/07 Python
Django实现学员管理系统
2019/02/26 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
Python里面search()和match()的区别
2016/09/21 面试题
机电专业个人求职信范文
2013/12/30 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书