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代码
Apr 02 Javascript
filemanage功能中用到的common.js
Apr 08 Javascript
表格单元格交错着色实现思路及代码
Apr 01 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
JavaScript中string转换成number介绍
Dec 31 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 Javascript
在antd Form表单中select设置初始值操作
Nov 02 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注入实例
2006/10/09 PHP
php ajax 静态分页过程形式
2011/09/02 PHP
php中异常处理方法小结
2015/01/09 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
JQUERY操作JSON实例代码
2010/02/09 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
原生JS实现微信通讯录
2020/06/18 Javascript
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
灵泰克Java笔试题
2016/01/09 面试题
初婚未育未抱养证明
2014/01/12 职场文书
求职简历的自我评价
2014/01/31 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
导游词之井冈山
2019/11/20 职场文书