快捷導(dǎo)航

Angularjs中數(shù)據(jù)綁定的實例詳解

更新時間：2017年08月25日 11:36:41 投稿：lqh

這篇文章主要介紹了Angularjs中數(shù)據(jù)綁定的實例詳解的相關(guān)資料,這里提供簡單實例，大家可以參考下，希望通過本文可以掌握這部分內(nèi)容，需要的朋友可以參考下

Angularjs中數(shù)據(jù)綁定的實例詳解

這是一個最簡單的angularjs的例子，關(guān)于數(shù)據(jù)綁定的，大家可以執(zhí)行一下，看看效果

<html ng-app>
<head>
<title>angularjs-include</title>
<script type="text/javascript" src="js/angular/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="name" value="" /><br />
<div>Hello,{{name}}</div>
</body>
</html>

關(guān)于數(shù)據(jù)雙向綁定，有時候不需要實時同步，比如當(dāng)輸入框失去焦點的時候才去更新div里面的內(nèi)容，這里可以用上ng-model-options屬性來解決，將上面的代碼稍做修改：

<html ng-app>
<head>
<title>angularjs-include</title>
<script type="text/javascript" src="js/angular/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="name" value="" ng-model-options="{ updateOn: 'blur' }" /><br />
<div>Hello,{{name}}</div>
</body>
</html>

或者改為每隔1秒來更新：

<html ng-app>
<head>
<title>angularjs-include</title>
<script type="text/javascript" src="js/angular/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="name" value="" ng-model-options="{ debounce: {default:1000} }" /><br />
<div>Hello,{{name}}</div>
</body>
</html>

如有疑問請留言或者到本站社區(qū)交流討論，大家共同進步，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章:

相關(guān)文章

AngularJS+Node.js實現(xiàn)在線聊天室
隨著互聯(lián)網(wǎng)和信息技術(shù)的發(fā)展，如何快速構(gòu)建高效、強大的動態(tài)網(wǎng)站成為很多人研究的熱點。該文將結(jié)合AngularJS和Node.js構(gòu)建一個在線聊天室，體現(xiàn)AngularJs和Node.js整合的優(yōu)點。
2015-08-08
Angular angular-file-upload文件上傳的示例代碼
這篇文章主要介紹了Angular angular-file-upload文件上傳的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
Angular實現(xiàn)雙向折疊列表組件的示例代碼
本篇文章主要介紹了Angular實現(xiàn)雙向折疊列表組件的示例代碼，分為左右兩組，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-11-11
Angular動態(tài)添加、刪除輸入框并計算值實例代碼
這篇文章主要介紹了Angular動態(tài)添加、刪除輸入框并計算值實例代碼的相關(guān)資料,需要的朋友可以參考下
2017-03-03
AngularJS實時獲取并顯示密碼的方法
這篇文章主要介紹了AngularJS實時獲取并顯示密碼的方法,涉及AngularJS數(shù)據(jù)綁定及顯示相關(guān)操作技巧,需要的朋友可以參考下
2018-02-02
AngularJS入門教程之模塊化操作用法示例
這篇文章主要介紹了AngularJS模塊化操作用法,結(jié)合實例形式分析了AngularJS基于模塊化操作避免命名沖突的相關(guān)操作技巧,需要的朋友可以參考下
2016-11-11
AngularJS遍歷獲取數(shù)組元素的方法示例
這篇文章主要介紹了AngularJS遍歷獲取數(shù)組元素的方法,涉及AngularJS簡單的數(shù)組遍歷及元素獲取相關(guān)操作技巧,需要的朋友可以參考下
2017-11-11
利用Angular.js限制textarea輸入的字數(shù)
相信在大家已經(jīng)學(xué)習(xí)了足夠多關(guān)于AngularJS的知識后，就可以開始創(chuàng)建第一個AngularJS應(yīng)用程序，這篇文章通過示例給大家介紹如何利用Angular.js限制textarea輸入的字數(shù)，有需要的朋友們可以參考借鑒，下面來一起看看吧。
2016-10-10
angularjs實現(xiàn)多張圖片上傳并預(yù)覽功能
這篇文章主要為大家詳細介紹了angularjs實現(xiàn)多張圖片上傳并預(yù)覽功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件詳解
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家具有一定參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。
2017-07-07