脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → AngularJS ng-model-options 指令

AngularJS基础 ng-model-options 指令简单示例

 更新时间：2016年08月02日 10:25:38   投稿：lqh  
本文主要介绍AngularJS ng-model-options 指令,这里对ng-model-options指令的基本资料进行整理,有需要的小伙伴可以参考下

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 指令的资料整理，后续继续补充相关资料。

您可能感兴趣的文章:

相关文章

  • 详解Angular路由 ng-route和ui-router的区别

    详解Angular路由 ng-route和ui-router的区别

    这篇文章主要介绍了详解Angular路由 ng-route和ui-router的区别，分别介绍了两种路由的用法和区别，有兴趣的可以了解一下
    2017-05-05
  • 什么是 AngularJS？AngularJS简介

    什么是 AngularJS？AngularJS简介

    这篇文章主要介绍了什么是 AngularJS？AngularJS简介,本文讲解了AngularJS方方面面的基础知识,AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言，通过扩展HTML的语法，让你能更清楚、简洁地构建你的应用组件,需要的朋友可以参考下
    2014-12-12
  • angularjs1.X 重构controller 的方法小结

    angularjs1.X 重构controller 的方法小结

    这篇文章主要介绍了angularjs1.X 重构controller 的方法小结，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • Angular数据绑定机制原理

    Angular数据绑定机制原理

    本篇文章主要介绍了Angular数据绑定机制原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Angular 与 Component store实践示例

    Angular 与 Component store实践示例

    这篇文章主要为大家介绍了Angular 与 Component store实践示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-02-02
  • AngularJS 使用$sce控制代码安全检查

    AngularJS 使用$sce控制代码安全检查

    SCE，即strict contextual escaping,我的理解是 严格的上下文隔离 ...翻译的可能不准确，但是通过字面理解，应该是angularjs严格的控制上下文访问，通过本文给大家介绍AngularJS 使用$sce控制代码安全检查，对angularjs sce相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • Angular.js自定义指令学习笔记实例

    Angular.js自定义指令学习笔记实例

    这篇文章主要介绍了Angular.js自定义指令的实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-02-02
  • AngularJS定时器的使用与移除操作方法【interval与timeout】

    AngularJS定时器的使用与移除操作方法【interval与timeout】

    这篇文章主要介绍了AngularJS定时器的使用与移除操作方法,结合实例形式分析了AngularJS中interval与timeout方法的相关使用技巧,需要的朋友可以参考下
    2016-12-12
  • Angular实现一个简单的多选复选框的弹出框指令实例

    Angular实现一个简单的多选复选框的弹出框指令实例

    下面小编就为大家带来一篇Angular实现一个简单的多选复选框的弹出框指令实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • Angular2中Bootstrap界面库ng-bootstrap详解

    Angular2中Bootstrap界面库ng-bootstrap详解

    不知道大家有没有留意，最近angular-ui团队终于正式发布了基于 Angular2的Bootstrap界面库ng-bootstrap ，之前工作中一直在用 AngularJS 1.x 的UI Bootstrap ， 因此对这个ng-bootstrap 也是很感兴趣，所以第一时间进行试用。这篇文章就给大家详细介绍下ng-bootstrap。
    2016-10-10

最新评论