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 相关文章推荐
jquery 子窗口操作父窗口的代码
Sep 21 Javascript
js 返回时间戳所对应的具体时间
Jul 20 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
基于JavaScript实现选项卡效果
Jul 21 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 Javascript
node-red File读取好保存实例讲解
Sep 11 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
js实现微信聊天效果
Aug 09 Javascript
js实现右键弹出自定义菜单
Sep 08 Javascript
vue组件的路由高亮问题解决方法
May 11 Vue.js
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 static局部静态变量和全局静态变量总结
2014/03/02 PHP
js 操作符实例代码
2009/10/24 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
在Django的视图(View)外使用Session的方法
2015/07/23 Python
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
用python实现刷点击率的示例代码
2019/02/21 Python
django 自定义过滤器的实现
2019/02/26 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
python随机生成库faker库api实例详解
2019/11/28 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
高中毕业自我鉴定
2013/12/16 职场文书
团队精神演讲稿
2013/12/31 职场文书
安全施工责任书
2014/08/25 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL