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 相关文章推荐
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
js 链式延迟执行DOME
Jan 04 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 Javascript
原生js+css实现tab切换功能
Sep 17 Javascript
微信小程序实现自定义底部导航
Nov 18 Javascript
微信小程序实现底部弹出框
Nov 18 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 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
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
Python调用C++程序的方法详解
2017/01/24 Python
python实现发送邮件功能
2017/07/22 Python
详解supervisor使用教程
2017/11/21 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
python实现简单文件读写函数
2021/02/25 Python
简单介绍Object类的功能、常用方法
2013/10/02 面试题
教师辞职报告范文
2014/01/20 职场文书
《放小鸟》教学反思
2014/04/20 职场文书
三八活动策划方案
2014/08/17 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技