【AngularJS】數據綁定(雙向綁定)

1、ng-app
2、ng-init
3、ng-model

ng-app表明了AngularJs的作用域,可以爲空;
ng-init表示初始化,這裏是寫在html上面的,在第一次加載的時候,初始化數據;

1、ng-model表示數據雙向綁定,把js中對象的屬性和html頁面上顯示的值進行綁定;同時也是把你新賦予的值和對象的屬性進行綁定;
這裏寫圖片描述;
上圖<script>中引入了AngularJs的來源;而div中的ng-app表明,AngualrJs的作用域是整個div,如果想整個頁面都用到AngularJS,可以卸載html標籤裏;

這裏寫圖片描述

2、這裏的ng-init初始化了對象p的name和age屬性;當瀏覽器第一次加載時,姓名後顯示的就是zhangsan;年齡後顯示的就是18;把對象的值顯示到頁面來,「從實體類中出來(確切的說,是【數據】從model中走出來)」這是正向綁定;然而,下面的輸入框和p的name和age屬性綁定了;你輸入的內容,會及時更新到p對象的name和age屬性裏,這是從頁面,到實體對象體內,「進入到實體類中去(確切的說是【數據】走到model體內去)」這是反向綁定;所以AngularJs是雙向綁定的;

歡迎大家關注我的微信公衆號~~
這裏寫圖片描述