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 相关文章推荐
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
Dec 27 Javascript
JQuery日期插件datepicker的使用方法
Mar 03 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
Jun 12 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 Javascript
详解JavaScript匿名函数和闭包
Jul 10 Javascript
javascript实现移动端上传图片功能
Aug 18 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 工厂模式使用方法
2010/05/18 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
Convert Seconds To Hours
2007/06/16 Javascript
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
JS轮播图实现简单代码
2021/02/19 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
详解Python中的正则表达式
2018/07/08 Python
python opencv实现运动检测
2018/07/10 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
代理商会议邀请函
2014/01/27 职场文书
新教师工作感言
2014/02/16 职场文书
教师网络培训感言
2014/03/09 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
婚前保证书范文
2015/02/28 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
pytorch--之halfTensor的使用详解
2021/05/24 Python
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸