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 相关文章推荐
$.format,jquery.format 使用说明
Jul 13 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
Bootstrap table使用方法总结
May 10 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
AngularJS实时获取并显示密码的方法
Feb 06 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 Javascript
小程序Request的另类用法详解
Aug 09 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 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和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
php生成curl命令行的方法
2015/12/14 PHP
Firefox div高度自适应
2009/04/28 Javascript
php与js的区别是什么
2013/08/05 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
python中使用序列的方法
2015/08/03 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
Pytorch to(device)用法
2020/01/08 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
用python实现名片管理系统
2020/06/18 Python
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
教师自我鉴定范文
2013/11/10 职场文书
初中班主任评语
2014/04/24 职场文书
公司贷款承诺书
2014/05/30 职场文书
应聘教师自荐书
2014/06/16 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
工作表扬信范文
2015/01/17 职场文书
详解MySQL的半同步
2021/04/22 MySQL
python实现图片九宫格分割的示例
2021/04/25 Python
新手初学Java List 接口
2021/07/07 Java/Android
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL
nginx rewrite功能使用场景分析
2022/05/30 Servers