脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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.js中下拉框实现渲染html的方法

    Angular.js中下拉框实现渲染html的方法

    这篇文章主要给大家介绍了关于在Angular.js中下拉框实现渲染html的方法，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来跟着小编一起来学习学习吧。
    2017-06-06
  • AngularJS基础 ng-copy 指令实例代码

    AngularJS基础 ng-copy 指令实例代码

    本文主要介绍AngularJS ng-copy 指令,这里帮大家整理了ng-copy指令的基础资料,并附有示例代码和效果图,有需要的朋友参考下
    2016-08-08
  • AngularJs 弹出模态框（model）

    AngularJs 弹出模态框（model）

    这篇文章主要介绍了AngularJs 弹出模态框（model）的相关资料,需要的朋友可以参考下
    2016-04-04
  • AngularJs验证重复密码的方法(两种)

    AngularJs验证重复密码的方法(两种)

    本文给大家介绍angularjs验证重复密码的两种方法，每种方法都有各自的优缺点，大家可以根据需要选择一种方法，具体内容详情大家通过本文详细了解下吧
    2016-11-11
  • 简单谈谈关于Angular Cli打包的事

    简单谈谈关于Angular Cli打包的事

    使用过angular2人都应该知道，angular2提供的Angular CLI来快速搭建，快速生成serives、component、derective、modulet各种模板...下面这篇文章主要给大家介绍了关于Angular Cli打包的一些事，需要的朋友可以参考下。
    2017-09-09
  • AngularJs 动态加载模块和依赖

    AngularJs 动态加载模块和依赖

    这篇文章主要介绍了AngularJs 动态加载模块和依赖方法的相关资料,需要的朋友可以参考下
    2016-09-09
  • Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态（懒）加载模块和依赖

    Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态（懒）加载模块和依赖

    这篇文章主要介绍了Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态（懒）加载模块和依赖,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-11-11
  • Angular.Js的自动化测试详解

    Angular.Js的自动化测试详解

    当Angular项目的规模到达一定的程度，就需要进行测试工作了。为什么要自动化测试？1，提高产出质量。2，减少重构时的痛。反正我最近重构多了，痛苦经历多了。3，便于新人接手。下面这篇文章就给大家详细介绍了Angular.Js的自动化测试，有需要的朋友们可以参考借鉴。
    2016-12-12
  • Angular的$http与$location

    Angular的$http与$location

    这篇文章主要为大家详细介绍了Angular的$http与$location，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 详解Angular中延迟加载的原理与使用

    详解Angular中延迟加载的原理与使用

    Angular 是一个流行的框架，用于构建动态和响应式 Web 应用程序，在本文中，我们将讨论延迟加载以及它如何与 Angular 中的路由一起工作，感兴趣的可以跟随小编一起学习一下
    2023-06-06

最新评论