 |
| 圖片為《舊車改造突擊隊》照片 |
還記得嗎？
上一篇學到了「使用AngualrJs製作待辦清單」貼心小連結＞肆・跟著老師動吃動
這篇我們將延續上一篇的程式，使用更聰明的方法來「改造」你的程式。
學習目標
你將學習到：- 當沒有預設資料，可以手動新增待辦清單
- Angular變數的預設值處理
- 監控Angular物件的方法$watch()
- 延伸閱讀
- JavaScript的20種陣列操作圖解
- AngularJs過濾器Filter
- AngularJs的監控方法$watch()比較
開始動手吧
一開始先為各位準備上一次的程式，如下
沒有預設值，手動新增待辦清單
在上一篇中，我們沒有讓使用者手動新增待辦，所以這個部分是全新的！代表我們需要規劃新的區塊讓使用者操作
一樣，先整理需求：
- 待辦事項預設值清空，變為沒有預設的待辦事項
- 新增待辦事項
- 讓使用者輸入畫面
- 送出新增的按鈕綁上新增事件
- 新增事件防呆
待辦預設值清空，變為沒有預設值的待辦事項
這個部分很簡單，因為ng-repeat是JavaScript陣列操作，所以dataList只要清掉資料變成空陣列即可。
讓使用者新輸入畫面
跳過！（這部分只是Html阿～
送出新增按鈕綁上新增事件
此部分使用上一篇教過的ng-click與AngularJs定義function方法，即可達到需求！
這裡會用到.push()方法是JavaScript的陣列操作，如下圖所示
「為使用者防呆」是每個Programer都需要必備的能力！
「一個好的程式，不需要說明書使用者也能懂！」
所以我們要做的防呆機制：如果使用者沒有輸入則必須阻擋動作並提醒使用者。
提醒方法我們使用alert()，alert()為JavaScript的視窗事件（Window Object Method），通知瀏覽器（Browser）跳出一個提醒視窗告知使用者內容。
新增的部分做好了，還要做什麼？
接下來我們要改造原本的程式，讓他從汽車變成跑車（誤
「先求有，再求好」是敏捷式開發（註1）的重要的原則之一
改變不是世界末日，改變是為了讓程式變的更好
同時也能讓客戶對於你的程式有更多認同與信心
所以我們非常歡迎任何的「改變」！
註1：敏捷式開發（Agile）是近來時常會聽到的一個名詞，非制式的開發方式而是一種精神（spirit），概略來說是以較短的開發循環，然後漸進式的開發與交付，來達到最貼近客戶的最終需求，而非傳統的一次性把需求與目標制訂好，才開始開發。
所以，我們要改變什麼？
修改 ＞ 把副標題的變數加上預設值為0。
監控Angular物件的方法$watch
使用方法：$scope.$watch('要監控的物件', function(){
//當被監控的物件改變，要執行的方法
}, true)
所以我們可以利用$watch的方法來監控待辦事項「資料」，當資料異動時，觸發計算數量方法，如此一來「完成」、「刪除」與「新增」等事件就可以不必做「計算數量方法」！
修改 ＞ 加上監控方法，並把原本綁定「計算數量方法」的部分拔除，不要做重複的事情。
如果你跟的上，那麼你完成的程式大概會像是這樣：
補充說明
一、JavaScript的20種陣列操作
網路上有個很好的圖片說明了20種JavaScript的陣列操作，淺顯易懂
資料來源：raw.githubusercontent.com
二、AngularJs的過濾器Filter
AngularJs中有個跟預設值很類似的用法叫做「過濾器（Filter）」，用來格式化要呈現的資料。
- 預設值：{{ Angular變數 || '預設值' }}
- 過濾器：{{ Angular變數 | filter }}
以上兩者用法只有一個「|」的差別，要小心不要搞混了～
AngularJs內建有幾種過濾器，我直接做了一個簡單的Demo
AngularJs內建有幾種過濾器，我直接做了一個簡單的Demo
如此一來，我們可以很輕鬆的格式化要呈現的資料！
三、AngularJs的$watch種類與比較
在AngularJs中$watch的方法分為三種$scope.$watch() 用於監控淺層改變（適用於監控單一屬性）
$scope.$watchCollection() 用於監控集合內部增減（適用於監控陣列）
$scope.$watch( , true) 用於監控深層改變（適用於監控物件內的屬性改變）
這邊我做了一個Demo提供大家參考
＊請注意，要馬兒好不可能要馬兒不吃草，沒有白吃的午餐，同樣的，程式使用上為了「方便」一定會犧牲某些東西，犧牲東西就是「效能」，如果你要監控的物件太多太深，又要監控最深層的屬性，效能一定會變的很差，使用上請特別注意。
重點複習
本篇我們把原本的待辦清單增加了新的功能，並且學到了以新的方式去控制資料的改變，讓大家在寫程式上可以更靈活（要準備好各種武器才有辦法面對各種敵人阿～）另外，「為自己的程式防呆」跟「敏捷式開發」是當代Programer都必備的美德跟精神阿！
那麼，我們下次見囉！