Angularjs中數(shù)據(jù)綁定的實(shí)例詳解
Angularjs中數(shù)據(jù)綁定的實(shí)例詳解
這是一個(gè)最簡(jiǎn)單的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ù)雙向綁定,有時(shí)候不需要實(shí)時(shí)同步,比如當(dāng)輸入框失去焦點(diǎn)的時(shí)候才去更新div里面的內(nèi)容,這里可以用上ng-model-options屬性來(lái)解決,將上面的代碼稍做修改:
<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秒來(lái)更新:
<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>
如有疑問(wèn)請(qǐng)留言或者到本站社區(qū)交流討論,大家共同進(jìn)步,感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- 詳談AngularJs 控制器、數(shù)據(jù)綁定、作用域
- 深入淺析AngularJS中的一次性數(shù)據(jù)綁定 (bindonce)
- AngularJS1.X學(xué)習(xí)筆記2-數(shù)據(jù)綁定詳解
- AngularJS框架中的雙向數(shù)據(jù)綁定機(jī)制詳解【減少需要重復(fù)的開(kāi)發(fā)代碼量】
- AngularJS入門(mén)教程之?dāng)?shù)據(jù)綁定原理詳解
- AngularJS入門(mén)教程之?dāng)?shù)據(jù)綁定用法示例
- AngularJS 雙向數(shù)據(jù)綁定詳解簡(jiǎn)單實(shí)例
- AngularJS實(shí)踐之使用NgModelController進(jìn)行數(shù)據(jù)綁定
- 詳解JavaScript的AngularJS框架中的作用域與數(shù)據(jù)綁定
- angularjs學(xué)習(xí)筆記之雙向數(shù)據(jù)綁定
相關(guān)文章
Angularjs material 實(shí)現(xiàn)搜索框功能
這篇文章主要介紹了Angularjs material 實(shí)現(xiàn)搜索框功能的相關(guān)資料,需要的朋友可以參考下2016-03-03詳解AngularJS Filter(過(guò)濾器)用法
這篇文章主要介紹了AngularJS的filter,中文名“過(guò)濾器”是用來(lái)過(guò)濾變量的值,或者格式化輸出,得到自己所期望的結(jié)果或格式的東東,的相關(guān)資料,需要的朋友可以參考下2015-12-12angularjs實(shí)現(xiàn)table表格td單元格單擊變輸入框/可編輯狀態(tài)示例
這篇文章主要介紹了angularjs實(shí)現(xiàn)table表格td單元格單擊變輸入框/可編輯狀態(tài),涉及AngularJS事件響應(yīng)及頁(yè)面table元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02AngularJs 動(dòng)態(tài)加載模塊和依賴
這篇文章主要介紹了AngularJs 動(dòng)態(tài)加載模塊和依賴方法的相關(guān)資料,需要的朋友可以參考下2016-09-09自定義Angular指令與jQuery實(shí)現(xiàn)的Bootstrap風(fēng)格數(shù)據(jù)雙向綁定的單選與多選下拉框
這篇文章主要介紹了自定義Angular指令與jQuery實(shí)現(xiàn)的Bootstrap風(fēng)格數(shù)據(jù)雙向綁定的單選與多選下拉框 的相關(guān)資料,需要的朋友可以參考下2015-12-12