AngularJS基础 ng-model-options 指令简单示例


Posted in Javascript onAugust 02, 2016

AngularJS ng-model-options 指令

AngularJS 实例

在失去焦点时绑定输入框的值到 scope 变量中:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p>更新输入框:</p>
<input ng-model="name" ng-model-options="{updateOn: 'blur'}">

<p>在失去焦点时绑定输入框的值到 scope 变量中:</p>

{{name}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "John Doe";
});
</script>

<p>该实例演示了如何使用 ng-model-options 指令绑定在失去焦点时输入框的值到 scope 变量中。</p>

</body>
</html>

定义和用法

ng-model-options 指令绑定了 HTML 表单元素到 scope 变量中

你可以指定绑定数据触发的时间,或者指定等待多少毫秒,参数设置可以参考以下说明。

语法

<element ng-model-options="option"></element>

<input>, <select>, <textarea>, 元素支持该指令。

参数值

描述
option 指定了绑定数据的规则,规则如下: {updateOn: 'event'}规则指定事件发生后绑定数据 {debounce : 1000} 规定等待多少毫秒后绑定数据 {allowInvalid : true|false} 规定是否需要验证后绑定数据 {getterSetter : true|false} 规定是否作为 getters/setters 绑定到模型 {timezone : '0100'} 规则是否使用时区

以上就是对AngularJS ng-model-options 指令的资料整理,后续继续补充相关资料。

Javascript 相关文章推荐
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
关于JS中prototype的理解
Sep 07 Javascript
原生javascript实现解析XML文档与字符串
Mar 01 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
Vue2.0系列之过滤器的使用
Mar 01 Javascript
Angular2之二级路由详解
Aug 31 Javascript
vue中引入第三方字体文件的方法示例
Dec 17 Javascript
Vue中jsx不完全应用指南小结
Nov 01 Javascript
jquery获取input输入框中的值
Nov 13 jQuery
jQuery实现电梯导航模块
Dec 22 jQuery
jQuery树形控件zTree使用小结
Aug 02 #Javascript
jquery 判断selection range 是否在容器中的简单实例
Aug 02 #Javascript
AngularJS基础 ng-model 指令详解及示例代码
Aug 02 #Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 #Javascript
JavaScript实现复制文章自动添加版权
Aug 02 #Javascript
js获取上传文件的绝对路径实现方法
Aug 02 #Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 #Javascript
You might like
PHP伪静态页面函数附使用方法
2008/06/20 PHP
PHP中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
php运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
jQuery select的操作实现代码
2009/05/06 Javascript
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
大数据分析用java还是Python
2020/07/06 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
汽车维修专业个人求职信范文
2014/01/01 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
python分分钟绘制精美地图海报
2022/02/15 Python
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers