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 相关文章推荐
幻宇的层模拟窗口效果-提供演示和下载
Jan 20 Javascript
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
用Javascript来生成ftp脚本的小例子
Jul 03 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
谈一谈javascript闭包
Jan 28 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 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实现与ASP Banner组件相似的类
2006/10/09 PHP
PHP获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
Python中__call__用法实例
2014/08/29 Python
讲解Python中fileno()方法的使用
2015/05/24 Python
Python输出9*9乘法表的方法
2015/05/25 Python
python之Socket网络编程详解
2016/09/29 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
python os.fork() 循环输出方法
2019/08/08 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
伦敦最著名的老字号百货公司:Selfridges(塞尔福里奇百货)
2016/07/25 全球购物
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
大学生就业自荐书
2014/06/16 职场文书
团队拓展活动方案
2014/08/28 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python
浅谈Python从全局与局部变量到装饰器的相关知识
2021/06/21 Python