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 相关文章推荐
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
js判断复选框是否选中及选中个数的实现代码
May 30 Javascript
JavaScript的字符串方法汇总
Jul 31 Javascript
AngularJS教程之MVC体系结构详解
Aug 16 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
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调用数据库的存贮过程!
2006/10/09 PHP
php&amp;java(二)
2006/10/09 PHP
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
js计算页面刷新的次数
2009/07/20 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
Python导入oracle数据的方法
2015/07/10 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
Python中创建二维数组
2018/10/17 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
python实现126邮箱发送邮件
2020/05/20 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
全球虚拟主机商:HostGator
2017/02/06 全球购物
三年级学生评语
2014/04/23 职场文书
单位租房协议书样本
2014/10/30 职场文书
药品开票员岗位职责
2015/04/15 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
Python3中最常用的5种线程锁实例总结
2021/07/07 Python
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python