angularjs 預覽圖片

一般我們在上傳檔案都是用 file input 上傳，在選擇檔案後通常只會顯示檔名
如果上傳的是圖檔又同時想要預覽選擇的圖片光用 file input 是無法實現的
以下就介紹一個簡便的方法來實現預覽圖片的效果

首先在 body 中加入 input 及 img 欄位

file input 用來選擇要預覽的圖片，img 用顯示被選的圖片
再來在 controller 中加入下列程式

這樣就可以顯示選擇的圖片了，這裡所使用的是 FileReader API 詳細可參考 MDN
reader.readAsDataURL 會返回以 "data:image/jpeg;base64," 開頭的 base64 字串
將此字串放進 img.src 中就可以顯示圖片了是不是很簡單啊 原始碼 Plunker 

執行結果

解決 MySQL CAST INT Return BigINT 的問題

偶然間發現 MySQL 使用 CAST Function 做型別轉換時，若指定輸出為 Integer 則輸出會固定為 BIGINT，如下圖

神了一下發現是 MySQL 的 Bug, http://bugs.mysql.com/bug.php?id=64084
同時也有高手提供了解決辦法，就是自建一個 Function 做轉換








這個 Function 也沒做什麼事，只是把傳進去的 BIGINT 以 INT32 長度回傳而已
所以結果就會變這樣

會發現這個問題是因為原本的資料庫是 MSSQL，在轉換成 MySQL 後將 Data 轉換到 Model 時發生型別錯誤，才發現原來經過 CAST 的 Number 會輸出為 BIGINT

AngularJs Select Binding

AngularJs 綁定 Select Element 的方法有二種, 一種為使用 ngOptions 另一種為 ngRepeat
使用 ngOptions 的方法如下

nOptions 會自動產生 <option></option> 並綁定 data.availableOptions 的 item

其中 option.name 為選單的 Text, option.id 為 Value

data.selectedOption 則為 data.availableOptions 的一個 item, 也就是當 selected 事件產生時 data.selectedOption = { id: x, name: yyyy }

使用 ngRepeat 的方法如下

ngRepeat 如同一般的用法在 <option> 中加入 ng-repeat Directive , 當 selected 事件產生時 data.model = option.id 而不是整個 data.availableOptions item

若要設定 selected 可以用 ng-selected directive

<option ng-selected="option.id == data.model">

二種用法的差別如下

ngOptions:

1.option element 自動產生

2.ng-model 為 object

3.有使用 track by 條件要注意 track by 值不能重複

4.指定 ng-model 即可 selected option

ngOptions Plunker

ngRepeat:

1.手動填入 ng-repeat option.name, option.id 到 Text 及 Value  

2.ng-model 為 value

3.需使用 ng-selected 才能 selected option

ngRepeat Plunker

官方文件參考 Angular JS API Select