AngularJS入門教程之數(shù)據(jù)綁定用法示例
更新時間：2016年11月01日 14:39:29 作者：Rongbo_J
這篇文章主要介紹了AngularJS之數(shù)據(jù)綁定用法,結(jié)合實例形式分析了AngularJS基于內(nèi)置指令ng-model實現(xiàn)數(shù)據(jù)綁定的操作技巧,需要的朋友可以參考下
本文實例講述了AngularJS數(shù)據(jù)綁定用法。分享給大家供大家參考，具體如下：
數(shù)據(jù)綁定是AngularJS中非常重要的特性，我們看一下下面的例子：
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
<title>tutorial02</title>
</head>
<body>
<div>
用戶名：<input type="text" ng-model="name" placeholder="用戶名"/>
密碼：<input type="password" ng-model="pword" placeholder="密碼"/>
<p>您輸入的用戶名：{{name}}</p>
<p>您輸入的密碼：{{pword}}</p>
</div>
</body>
</html>
這個例子非常簡單，我們先在瀏覽器中運行一下看看效果。
當我們在文本框中輸入信息后，我們輸入的信息會動態(tài)的回顯到頁面中。
在這個例子中我們使用到了AngularJs的另一個內(nèi)置指令ng-model,它表示我們在模型數(shù)據(jù)對象（$scope）中添加一個名為”name”的屬性，并將它和文本框?qū)ο筮M行綁定。這意味著不管我們在文本框中輸入什么，都會同步到這個”name”屬性中，AngularJs會監(jiān)聽表單對象相關(guān)事件，所以回顯內(nèi)容會隨著文本框的輸入而改變。
需要注意的是ng-model只能用在表單元素標簽中。
AngularJS源碼可點擊此處本站下載。
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
您可能感興趣的文章:
- 詳談AngularJs 控制器、數(shù)據(jù)綁定、作用域
- 深入淺析AngularJS中的一次性數(shù)據(jù)綁定 (bindonce)
- AngularJS1.X學習筆記2-數(shù)據(jù)綁定詳解
- AngularJS框架中的雙向數(shù)據(jù)綁定機制詳解【減少需要重復(fù)的開發(fā)代碼量】
- AngularJS入門教程之數(shù)據(jù)綁定原理詳解
- AngularJS 雙向數(shù)據(jù)綁定詳解簡單實例
- AngularJS實踐之使用NgModelController進行數(shù)據(jù)綁定
- 詳解JavaScript的AngularJS框架中的作用域與數(shù)據(jù)綁定
- angularjs學習筆記之雙向數(shù)據(jù)綁定
- Angularjs中數(shù)據(jù)綁定的實例詳解
相關(guān)文章
Angular.js中下拉框?qū)崿F(xiàn)渲染html的方法
這篇文章主要給大家介紹了關(guān)于在Angular.js中下拉框?qū)崿F(xiàn)渲染html的方法，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來跟著小編一起來學習學習吧。2017-06-06
angular4模塊中給標簽添加背景圖的實現(xiàn)方法
下面小編就為大家?guī)硪黄猘ngular4模塊中給標簽添加背景圖的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
angular route中使用resolve在uglify壓縮后問題解決
這篇文章主要介紹了angular route中使用resolve在uglify壓縮后問題解決的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了詳解在 Angular 項目中添加插件 ng-bootstrap，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
AngularJS整合Springmvc、Spring、Mybatis搭建開發(fā)環(huán)境
這篇文章主要介紹了AngularJS整合Springmvc、Spring、Mybatis搭建開發(fā)環(huán)境的相關(guān)資料，為學習使用AngularJS做好基礎(chǔ)準備，感興趣的小伙伴們可以參考一下2016-02-02
詳解angular2實現(xiàn)ng2-router 路由和嵌套路由
本篇文章主要介紹了詳解angular2實現(xiàn)ng2-router 路由和嵌套路由，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
angular2+node.js express打包部署的實戰(zhàn)
本篇文章主要介紹了angular2+node.js express打包部署的實戰(zhàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
Angular7創(chuàng)建項目、組件、服務(wù)以及服務(wù)的使用
這篇文章主要介紹了Angular7創(chuàng)建項目、組件、服務(wù)以及服務(wù)的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
Angular+ionic實現(xiàn)折疊展開效果的示例代碼
這篇文章主要介紹了Angular+ionic實現(xiàn)折疊展開效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
這篇文章主要幫助大家學習使用AngularJS文件上傳控件angular-file-upload，感興趣的小伙伴們可以參考一下2016-02-02