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 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 Javascript
vue实现移动端返回顶部
Oct 12 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
一个域名查询的程序
2006/10/09 PHP
第十节--抽象方法和抽象类
2006/11/16 PHP
php gzip压缩输出的实现方法
2013/04/27 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
Array.prototype 的泛型应用分析
2010/04/30 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
实例讲解python中的序列化知识点
2018/10/08 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
python 字典的打印实现
2019/09/26 Python
python读取ini配置文件过程示范
2019/12/23 Python
Python super()函数使用及多重继承
2020/05/06 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
优秀学生获奖感言
2014/02/15 职场文书
考核评语大全
2014/04/29 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
明确岗位职责
2015/02/14 职场文书
修改并编译golang源码的操作步骤
2021/07/25 Golang
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript