在上一篇中我們已經學會如何在 Controller 中新增函式來讓 ng-click 能運作，同時也能動態新增及刪除朋友清單了。現在則是要來看看如何更新朋友的資料。
先來看最後的效果：
筆者想要做到連點滑鼠兩下後就能在原地編輯(In-place editing)。所以這邊除了使用 ng-dblclick 之外，還利用了 ng-show 及 ng-hide 來做了點手腳：
1 2 3 4 5 6 7 8 9 10 11 | <div class="alert alert-info" ng-repeat="friend in friends"> <button type="button" class="close" ng-click="remove($index);">×</button> <div> {{ friend.name }} <span class="badge badge-important">{{ friend.age }} 歲</span> </div> <div> <input type="text" class="input-small" ng-model="friend.name"> <input type="text" class="input-small" ng-model="friend.age"> <button class="btn">Update</button> </div> </div> |
現在若是直接瀏覽的話，會同時看到這兩個 div 區塊。第一個 div 就是單純顯示文字內容；而另一個 div 則是有輸入方塊及用來更新用的按鈕。一開始應該是要看到第一個 div 且隱藏第二個 div。為了做到能判斷什麼時候要顯示及隱藏，所以筆者針對 Friend 物件額外自訂一個叫 editing 的屬性。若它是 false 則顯示第一個 div；反之則顯示第二個 div。
所以先來加上 ng-show 及 ng-hide 的判斷：
1 2 3 4 5 6 7 8 9 10 11 | <div class="alert alert-info" ng-repeat="friend in friends"> <button type="button" class="close" ng-click="remove($index);">×</button> <div ng-hide="friend.editing"> {{ friend.name }} <span class="badge badge-important">{{ friend.age }} 歲</span> </div> <div ng-show="friend.editing"> <input type="text" class="input-small" ng-model="friend.name"> <input type="text" class="input-small" ng-model="friend.age"> <button class="btn">Update</button> </div> </div> |
一但加上去後就看不到第二個 div 區塊了。接著筆者希望當點擊第一個 div 區塊時顯示第二個區塊，所以這邊得加上判斷滑鼠連點 ng-dblclick 的語法。那要再多寫函式嗎？嘿~免啦，因為 ng-click 及 ng-dblclick 是都可以接受 Angular 表達式(Angular Expressions)的，所以直接寫入語法是沒問題的。
1 2 3 | <div ng-hide="friend.editing" ng-dblclick="friend.editing=true;"> {{ friend.name }} <span class="badge badge-important">{{ friend.age }} 歲</span> </div> |
這樣當點擊時就會隱藏第一個 div 區塊並顯示第二個 div 區塊囉：
最後同樣也在 Update 按鈕上加上動作：
1 | <button class="btn" ng-click="friend.editing=false;">Update</button> |
加完後也別忘了存檔測試喔。
那 friends 陣列中的物件都要多加這個屬性嗎？其實可加可不加的！因為一開始沒有這屬性，所以取到的值自然就是 undefined，那也就是 false 了。
現在我們能原地編輯(In-place editing)了，那請各位同學將新增的功能也改成跟編輯的畫面一樣，然後將它移動到最後一筆資料下方吧！