快捷導(dǎo)航

AngularJS基礎(chǔ) 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 變量中

你可以指定綁定數(shù)據(jù)觸發(fā)的時間，或者指定等待多少毫秒，參數(shù)設(shè)置可以參考以下說明。

語法

<input>, <select>, <textarea>, 元素支持該指令。

參數(shù)值

值	描述
option	指定了綁定數(shù)據(jù)的規(guī)則，規(guī)則如下: {updateOn: 'event'}規(guī)則指定事件發(fā)生后綁定數(shù)據(jù) {debounce : 1000} 規(guī)定等待多少毫秒后綁定數(shù)據(jù) {allowInvalid : true\|false} 規(guī)定是否需要驗證后綁定數(shù)據(jù) {getterSetter : true\|false} 規(guī)定是否作為 getters/setters 綁定到模型 {timezone : '0100'} 規(guī)則是否使用時區(qū)

值

描述

option

指定了綁定數(shù)據(jù)的規(guī)則，規(guī)則如下:

{updateOn: 'event'}規(guī)則指定事件發(fā)生后綁定數(shù)據(jù)

{debounce : 1000} 規(guī)定等待多少毫秒后綁定數(shù)據(jù)

{allowInvalid : true|false} 規(guī)定是否需要驗證后綁定數(shù)據(jù)

{getterSetter : true|false} 規(guī)定是否作為 getters/setters 綁定到模型

{timezone : '0100'} 規(guī)則是否使用時區(qū)

以上就是對AngularJS ng-model-options 指令的資料整理，后續(xù)繼續(xù)補充相關(guān)資料。

您可能感興趣的文章:

相關(guān)文章

Angular.js中下拉框?qū)崿F(xiàn)渲染html的方法
這篇文章主要給大家介紹了關(guān)于在Angular.js中下拉框?qū)崿F(xiàn)渲染html的方法，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。
2017-06-06
AngularJS基礎(chǔ) ng-copy 指令實例代碼
本文主要介紹AngularJS ng-copy 指令,這里幫大家整理了ng-copy指令的基礎(chǔ)資料,并附有示例代碼和效果圖,有需要的朋友參考下
2016-08-08
AngularJs 彈出模態(tài)框（model）
這篇文章主要介紹了AngularJs 彈出模態(tài)框（model）的相關(guān)資料,需要的朋友可以參考下
2016-04-04
AngularJs驗證重復(fù)密碼的方法(兩種)
本文給大家介紹angularjs驗證重復(fù)密碼的兩種方法，每種方法都有各自的優(yōu)缺點，大家可以根據(jù)需要選擇一種方法，具體內(nèi)容詳情大家通過本文詳細了解下吧
2016-11-11
簡單談?wù)勱P(guān)于Angular Cli打包的事
使用過angular2人都應(yīng)該知道，angular2提供的Angular CLI來快速搭建，快速生成serives、component、derective、modulet各種模板...下面這篇文章主要給大家介紹了關(guān)于Angular Cli打包的一些事，需要的朋友可以參考下。
2017-09-09
AngularJs 動態(tài)加載模塊和依賴
這篇文章主要介紹了AngularJs 動態(tài)加載模塊和依賴方法的相關(guān)資料,需要的朋友可以參考下
2016-09-09
Angular ui-roter 和AngularJS 通過 ocLazyLoad 實現(xiàn)動態(tài)（懶）加載模塊和依賴
這篇文章主要介紹了Angular ui-roter 和AngularJS 通過 ocLazyLoad 實現(xiàn)動態(tài)（懶）加載模塊和依賴,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-11-11
Angular.Js的自動化測試詳解
當(dāng)Angular項目的規(guī)模到達一定的程度，就需要進行測試工作了。為什么要自動化測試？1，提高產(chǎn)出質(zhì)量。2，減少重構(gòu)時的痛。反正我最近重構(gòu)多了，痛苦經(jīng)歷多了。3，便于新人接手。下面這篇文章就給大家詳細介紹了Angular.Js的自動化測試，有需要的朋友們可以參考借鑒。
2016-12-12
Angular的$http與$location
這篇文章主要為大家詳細介紹了Angular的$http與$location，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
詳解Angular中延遲加載的原理與使用
Angular 是一個流行的框架，用于構(gòu)建動態(tài)和響應(yīng)式 Web 應(yīng)用程序，在本文中，我們將討論延遲加載以及它如何與 Angular 中的路由一起工作，感興趣的可以跟隨小編一起學(xué)習(xí)一下
2023-06-06