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的返回顶部效果(兼容IE6)
Jan 17 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
Sep 12 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
Oct 15 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
Jan 06 Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
微信小程序 跳转传递数据的实例
Jul 06 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
jQuery实现高级检索功能
May 28 jQuery
微信小程序页面滚动到指定位置代码实例
Sep 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
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
js调用后台servlet方法实例
2013/06/09 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
js日期联动示例
2014/05/02 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
python函数形参用法实例分析
2015/08/04 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
python实现扫雷小游戏
2020/04/24 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
中文系师范生自荐信
2013/10/01 职场文书
淘宝活动策划方案
2014/02/06 职场文书
家长会主持词
2014/03/26 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
干部竞争上岗演讲稿
2014/09/11 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书