2013年7月25日 星期四

ng-options的一點小注意事項!

前天我寫了一個 Angularjs 的 select 連動功能,發現一些使用上會忽略的事情特在此紀錄一下!

有寫過 Angularjs 的人就會知道 select 跟 ng-options是多麼的好用!

其中只要 ng-model榜定一下,我們選了什麼立刻就反應回去我們的model!

也因此我們可以透過 $watch() 監看我們綁定的值或是用ng-change這兩種方式來觸發選取後的動作!

這兩種方是我都試過但我個人偏好使用 ng-change ( 主觀的只是一種 fu.....XD

但我遇到的一個問題是用 ng-options 的時候 select 會有空白選項.....

難道我遇到了傳說中的「留白」.....

在藝術或設計手法中適當的留白可以營造一種氣氛! 襯托出一種心境上的氛圍!

但在程式上這就叫做「BUG」...... ( 怎差這麼的多.....

後來我發現會有這問題其實是因為我們 ng-model 一開始的初始值是空的啦!

只要給一下初始值就不會「留白」囉!

例如:
<select ng-model="township.ZipCode" ng-options="township.ZipCode as township.Name for township in areas" ng-change="townshipChange()"></select> 

如果一開始我們的 scope.areas 是[],就會有這問題!

解決方是就是不要讓它是空的就行囉!

沒有留言:

張貼留言