AngularJS 學習筆記 （四） 基本概念和用法 之 雙向資料繫結
阿新 • • 發佈：2020-10-09
1、取值表示式與ng-bind指令
2、雙向資料繫結的經典才場景 -- 表單
html程式碼：
form.js程式碼:
執行效果1：原始顯示效果，並點選按鈕1
執行效果2：點選測試02按鈕後，再點選測試01按鈕檢視控制檯資訊。
PS：請看，這裡檢視發生了變化，是由資料模型改變而改變的。
執行效果3：點選測試03重置按鈕後，再點選測試01檢視控制檯資訊。
執行效果4：輸入其他的資訊，Model發生變化。
PS：這裡就是雙向資料繫結。
3、動態切換css標籤樣式
3.1 切換CSS樣式的方法之一
html程式碼：
css樣式：
JS程式碼：
效果圖，點選前後：
PS：動手敲敲程式碼，感覺越來越熟練了。
3.2 切換CSS樣式的方法之二 ng-class （推薦）
html程式碼：
CSS程式碼:
JS程式碼：
執行效果1：初始狀態
執行狀態2：點選Simulate Error
執行狀態3：點選Simulate Warning
PS：檢視文件ng-class的用法之二
4、ng-show和ng-hide
html程式碼：
JS程式碼：
執行效果1：初始狀態
執行效果2：點選按鈕後
PS：ng-show 和 ng-hide的用法是控制其的布林值，由AngularJS判斷是否顯示。
5、ngAnimate
PS：好懶了直接說話。
- 依賴模組加入 ngAnimate 比如：var MyApp = angular.module("Myapp",["ngAnimate"]);
- 使用：在*.CSS中增加使用.ng-center 和 .ng-leave（當進入時 和 離開時）
- 具體使用：需要和前面的類連起來用，不能有空格。
- 例子： .hello.ng-leave{index:9999;}。不能寫成.hello .ng-enter。
轉載於:https://my.oschina.net/asktao/blog/687256