今天我們要來認識一下 ng-init、ng-checked 及 ng-readonly 等用來擴充 HTML 指令的宣告式語法(Directives Syntax)。
還記得我們在 AngularJS 入門教學 - Hello AngularJS!! 中為了讓在使用表達式時的 Model 能有預設值，所以使用 {{ expression|| 'defaultValue' }} 的方式嗎？
忘了也沒關係，讓我們來直接看一下當時的寫法：
1 2 3 4 5 6 7 8 9 | <div class="alert alert-info"> <label>Messgae:</label> <input type="text" ng-model="greeting" placeholder="Enter a message here"> <br> <label>Name:</label> <input type="text" ng-model="name" placeholder="Enter a name here"> <hr> <h1>{{ greeting || "Hello" }} {{ name || "AngularJS" }}!!</h1> </div> |
不過...你仔細看看畫面：
雖然我們的 "Hello AngularJS!!" 是有顯示啦，但輸入方塊中其實都還是空白的。如果希望這兩個 Model 有預設值時，現在我們當然可以透過 Controller 來先指定，若只是個小程式或是簡單的程式時，能不寫 Controller 嗎？
這當然是可以的，只要透過 ng-init 來設定的話，就會在套上模版時先進行初始化的動作：
1 | <div class="alert alert-info" ng-init="greeting='Hi,';name='男丁';"> |
筆者這邊直接在 div 中進行初始化的動作，然後記得把 h1 中的預設值先拿掉，接著就能看最後結果囉：
這樣是不是就兩邊都會有預設值了呢！
接著再來看也是表單中常出現的勾選框。 對於勾選框來說，勾不勾選其實是一個很重要的動作，在 AngularJS 中可以透過 ng-checked 來控制勾選狀態。
1 2 3 4 5 6 7 8 | <div class="alert alert-success"> <label>全選/全取消: <input type="checkbox" ng-model="selectAll"></label> <input type="checkbox" ng-checked="selectAll"> <input type="checkbox" ng-checked="selectAll"> <input type="checkbox" ng-checked="selectAll"> <input type="checkbox" ng-checked="selectAll"> <input type="checkbox" ng-checked="selectAll"> </div> |
下面那一排的勾選框的勾選與否是依 selectAll 來決定的，所以將用來控制勾選動作的 ng-checked 指定為 selectAll，一旦 selectAll 為 true 時，下面那排勾選框也會因為 true 而觸發 ng-checked 的勾選動作囉。
這邊有個地方要注意一下，如果指令只是用來表現元素的狀態使用的話，雖然它們本身的指令會綁到某些 Model 上，但它們是不具備雙向資料綁定(Two-way data-binding)的功能喔！像是我們之前學過的 ng-show、ng-hide，到這個 ng-checked 都是。
接下來要介紹的 ng-disabled 是用來控制表單元素的啟用/禁用狀態，所以它也...(請大聲說出來)
1 2 3 4 5 | <div class="alert"> <label>我同意<input type="checkbox" ng-model="agree"></label> <input type="text" ng-disabled="!agree" value="abgne.tw"> <button class="btn btn-primary" ng-disabled="!agree">開始下載</button> </div> |
筆者在 ng-disabled 加入 ! 是為了讓結果反過來，若沒勾選時則停用；反之則啟用：
至於 ng-readonly 是用來控制可輸入元素的唯讀狀態，當然它也就...
1 2 3 4 5 | <div class="alert alert-error"> <label>唯讀<input type="checkbox" ng-model="readonly"></label> <input type="text" ng-readonly="readonly" value="abgne.tw"> <textarea ng-readonly="readonly"></textarea> </div> |
最後請各位利用今天教的這幾種跟狀態有關的指令來做一個簡單的註冊會員表單吧！