Angularjs中數(shù)據(jù)綁定的實例詳解
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ū)交流討論,大家共同進步,感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
- 詳談AngularJs 控制器、數(shù)據(jù)綁定、作用域
- 深入淺析AngularJS中的一次性數(shù)據(jù)綁定 (bindonce)
- AngularJS1.X學(xué)習(xí)筆記2-數(shù)據(jù)綁定詳解
- AngularJS框架中的雙向數(shù)據(jù)綁定機制詳解【減少需要重復(fù)的開發(fā)代碼量】
- AngularJS入門教程之?dāng)?shù)據(jù)綁定原理詳解
- AngularJS入門教程之?dāng)?shù)據(jù)綁定用法示例
- AngularJS 雙向數(shù)據(jù)綁定詳解簡單實例
- AngularJS實踐之使用NgModelController進行數(shù)據(jù)綁定
- 詳解JavaScript的AngularJS框架中的作用域與數(shù)據(jù)綁定
- angularjs學(xué)習(xí)筆記之雙向數(shù)據(jù)綁定
相關(guān)文章
Angularjs material 實現(xiàn)搜索框功能
這篇文章主要介紹了Angularjs material 實現(xiàn)搜索框功能的相關(guān)資料,需要的朋友可以參考下2016-03-03angularjs實現(xiàn)table表格td單元格單擊變輸入框/可編輯狀態(tài)示例
這篇文章主要介紹了angularjs實現(xiàn)table表格td單元格單擊變輸入框/可編輯狀態(tài),涉及AngularJS事件響應(yīng)及頁面table元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-02-02自定義Angular指令與jQuery實現(xiàn)的Bootstrap風(fēng)格數(shù)據(jù)雙向綁定的單選與多選下拉框
這篇文章主要介紹了自定義Angular指令與jQuery實現(xiàn)的Bootstrap風(fēng)格數(shù)據(jù)雙向綁定的單選與多選下拉框 的相關(guān)資料,需要的朋友可以參考下2015-12-12