AngularJS基礎(chǔ) ng-model-options 指令簡單示例
更新時(shí)間：2016年08月02日 10:25:38 投稿：lqh
本文主要介紹AngularJS ng-model-options 指令,這里對(duì)ng-model-options指令的基本資料進(jìn)行整理,有需要的小伙伴可以參考下
AngularJS ng-model-options 指令
AngularJS 實(shí)例
在失去焦點(diǎn)時(shí)綁定輸入框的值到 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>在失去焦點(diǎn)時(shí)綁定輸入框的值到 scope 變量中:</p>
{{name}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
<p>該實(shí)例演示了如何使用 ng-model-options 指令綁定在失去焦點(diǎn)時(shí)輸入框的值到 scope 變量中。</p>
</body>
</html>
定義和用法
ng-model-options 指令綁定了 HTML 表單元素到 scope 變量中
你可以指定綁定數(shù)據(jù)觸發(fā)的時(shí)間，或者指定等待多少毫秒，參數(shù)設(shè)置可以參考以下說明。
語法
<element ng-model-options="option"></element>
<input>, <select>, <textarea>, 元素支持該指令。
參數(shù)值
| 值 | 描述 |
|---|---|
| option | 指定了綁定數(shù)據(jù)的規(guī)則，規(guī)則如下: {updateOn: 'event'}規(guī)則指定事件發(fā)生后綁定數(shù)據(jù) {debounce : 1000} 規(guī)定等待多少毫秒后綁定數(shù)據(jù) {allowInvalid : true|false} 規(guī)定是否需要驗(yàn)證后綁定數(shù)據(jù) {getterSetter : true|false} 規(guī)定是否作為 getters/setters 綁定到模型 {timezone : '0100'} 規(guī)則是否使用時(shí)區(qū) |
以上就是對(duì)AngularJS ng-model-options 指令的資料整理，后續(xù)繼續(xù)補(bǔ)充相關(guān)資料。
您可能感興趣的文章:
- angularjs select 賦值 ng-options配置方法
- Angular中ng-options下拉數(shù)據(jù)默認(rèn)值的設(shè)定方法
- AngularJS中ng-options實(shí)現(xiàn)下拉列表的數(shù)據(jù)綁定方法
- angular指令筆記ng-options的使用方法
- AngularJS動(dòng)態(tài)綁定ng-options的ng-model實(shí)例代碼
- 詳解使用angularjs的ng-options時(shí)如何設(shè)置默認(rèn)值(初始值)
- AngularJS學(xué)習(xí)筆記之ng-options指令
- angularJs中ng-model-options設(shè)置數(shù)據(jù)同步的方法
相關(guān)文章
Angular.js中下拉框?qū)崿F(xiàn)渲染html的方法
這篇文章主要給大家介紹了關(guān)于在Angular.js中下拉框?qū)崿F(xiàn)渲染html的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-06-06
AngularJS基礎(chǔ) ng-copy 指令實(shí)例代碼
本文主要介紹AngularJS ng-copy 指令,這里幫大家整理了ng-copy指令的基礎(chǔ)資料,并附有示例代碼和效果圖,有需要的朋友參考下2016-08-08
這篇文章主要介紹了AngularJs 彈出模態(tài)框（model）的相關(guān)資料,需要的朋友可以參考下2016-04-04
AngularJs驗(yàn)證重復(fù)密碼的方法(兩種)
本文給大家介紹angularjs驗(yàn)證重復(fù)密碼的兩種方法，每種方法都有各自的優(yōu)缺點(diǎn)，大家可以根據(jù)需要選擇一種方法，具體內(nèi)容詳情大家通過本文詳細(xì)了解下吧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 動(dòng)態(tài)加載模塊和依賴
這篇文章主要介紹了AngularJs 動(dòng)態(tài)加載模塊和依賴方法的相關(guān)資料,需要的朋友可以參考下2016-09-09
Angular ui-roter 和AngularJS 通過 ocLazyLoad 實(shí)現(xiàn)動(dòng)態(tài)（懶）加載模塊和依賴
這篇文章主要介紹了Angular ui-roter 和AngularJS 通過 ocLazyLoad 實(shí)現(xiàn)動(dòng)態(tài)（懶）加載模塊和依賴,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
當(dāng)Angular項(xiàng)目的規(guī)模到達(dá)一定的程度，就需要進(jìn)行測試工作了。為什么要自動(dòng)化測試？1，提高產(chǎn)出質(zhì)量。2，減少重構(gòu)時(shí)的痛。反正我最近重構(gòu)多了，痛苦經(jīng)歷多了。3，便于新人接手。下面這篇文章就給大家詳細(xì)介紹了Angular.Js的自動(dòng)化測試，有需要的朋友們可以參考借鑒。2016-12-12
這篇文章主要為大家詳細(xì)介紹了Angular的$http與$location，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
Angular 是一個(gè)流行的框架，用于構(gòu)建動(dòng)態(tài)和響應(yīng)式 Web 應(yīng)用程序，在本文中，我們將討論延遲加載以及它如何與 Angular 中的路由一起工作，感興趣的可以跟隨小編一起學(xué)習(xí)一下2023-06-06