AngularJS 學習筆記 （四） 基本概念和用法 之 雙向數據綁定

一、取值表達式與ng-bind指令

    

二、雙向數據綁定的經典才場景 -- 表單

    html代碼：

    

    form.js代碼:

    

運行效果1：原始顯示效果，並點擊按鈕1

    

   運行效果2：點擊測試02按鈕後，再點擊測試01按鈕查看控制檯信息。

    

PS：請看，這裏視圖發生了變化，是由數據模型改變而改變的。

運行效果3：點擊測試03重置按鈕後，再點擊測試01查看控制檯信息。

    

運行效果4：輸入其餘的信息，Model發生變化。

    

    PS：這裏就是雙向數據綁定。

三、動態切換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的用法之二

    
 

四、ng-show和ng-hide

    html代碼：

    

    JS代碼：

    

    運行效果1：初始狀態

    

    運行效果2：點擊按鈕後

    

PS：ng-show 和 ng-hide的用法是控制其的布爾值，由AngularJS判斷是否顯示。

五、ngAnimate

    PS：好懶了直接說話。

1. 依賴模塊加入 ngAnimate 好比：var MyApp = angular.module("Myapp",["ngAnimate"]);
2. 使用：在*.CSS中增長使用.ng-center 和 .ng-leave（當進入時 和 離開時）
3. 具體使用：須要和前面的類連起來用，不能有空格。
4. 例子：  .hello.ng-leave{index:9999;}。不能寫成.hello .ng-enter。