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 操作XML入门
Dec 25 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
jquery插件 autoComboBox 下拉框
Dec 22 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
详解javascript函数写法大全
Mar 25 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
vue+element-ui+axios实现图片上传
Aug 20 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
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
Json解析的方法小结
2016/06/22 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
win10环境下python3.5安装步骤图文教程
2017/02/03 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
英国电子专家:maplin
2019/09/04 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
厨师长岗位职责范本
2014/08/25 职场文书
军训新闻稿范文
2015/07/17 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
Golang map映射的用法
2022/04/22 Golang