文章

目前顯示的是 六月, 2015的文章

angular-form-gen:WYSIWYG,用拖拉的方式設計表單

angular-form-gen

看官網的範例還滿有趣的,目前暫時想不到怎麼應用,記下來也許以後有機會可以試試看囉。

angular directive for inline-edit

edit-in-place、inline-edit or click-to-edit 是個蠻方便的功能,最近需要用到所以找了一下,下面幾個都可以作到:

Angular-xeditableng-inline-editangular-meditor angular-xeditable 以前有用過,功能似乎比較完整,也許哪天很閒的時候來寫一些教學文吧。

不過官網其實已經很完整了說.....

[筆記] ngTasty:好用的表格 directive

常以表格形式列出資料,又需要分頁、搜尋、以某欄位排序,自己刻又嫌麻煩?來試試ngTasty吧。

PS.想自己來的可以參考這篇文章

官網&Demo
官網文件與sample code其實還算詳細,只是兩種表格沒有說明差別在哪,只好自己try囉....
因為目前用到的部份,資料是非同步抓取回來的,所以目前只用到兩種: Table with simple $http load resourceTable server side complete
Table with simple $http load resource 感覺上比較適合用在資料量不多,一次全部抓回來使用,因為是透過promise非同步抓取的,所以使用上要搭配watch-resource="collection"才能在資料抓回來之後正常顯示出來。
Table server side 感覺上比較適合資料量較多,尤其是分頁時,一次只抓一頁的量,換頁、改變排序、搜尋或改變每頁顯示數量時都會自動抓取一次資料。

PS.排序功能似乎有些問題,在最近的使用的專案中,使用 Table with simple $http load resource 學生的成績列表似乎只能按照座號(第一個欄位)排序,即使使用其他欄位排序時依然如此,原因不明......所以目前暫時關閉任何排序:bind-not-sort-by 設為 [](空陣列)

[筆記] angularjs 中匯出 Excel 檔

如果 controller 中有個物件陣列要匯出成一個excel檔,除了藉由server端產生之外,也可以由client端處理(反正資料已經在client端了嘛,就不必再操server了....)。

可以輸出excel檔的library有好幾個(可參考這篇),這篇筆記採用alasql來處理,因為....目前為止看起來最簡單囉! ^_^
官網
範例

手冊@slideshare

步驟: 1、下載後在 html 中載入 alasql.min.js 2、在 controller 中,假設 $scope.items 為欲輸出之物件陣列,$scope.export為執行輸出之function $scope.export = function() { alasql('SELECT * INTO XLSX( "john.xlsx", {headers:true} ) FROM ?', [ $scope.items ] ); }; 3、在 html 中設置一個按鈕,設定 ng-click="export()"

收工~~

PS.如果只想輸出部份資料而不是全部欄位,可以如下

SELECT id, name INTO ........  ==>只輸出 id 和 name 兩欄

[筆記] parse excel in angularjs

圖片
以往要匯入excel的資料到資料庫,需要將檔案上傳到server端,然後在server端處理,有點小麻煩。現在有另一種選擇,在client端讀取,然後傳送到server端寫入。這篇筆記前端是以angularjs為例子,但不包含server端的程式。

運作流程:
讀入excel檔,xls or xlsx都可以,xlsx為佳選擇資料表以json格式將資料傳送到server端處理 需要的library與目前使用版本:
angularjs(官網)v.1.3.15JS Xlsx(Github相關網站)v.0.8.0xlsx-reader.js(Github)v.0.0.1lodash(Github官網)v.3.9.3 檔案結構:



為 angularjs 加入其他好用的 filter

Github:angular-filter

angularjs 內建的 filter 不夠用嗎,試試 angular-filter 吧

angular-formly

用 angularjs 產生表單欄位,可依條件顯示 / 隱藏某些欄位,還可做驗證。可以簡化 view 的 html code

不錯的模組,值得試試!!

Github

官網

教學:
Easy AngularJS Forms with angular-formly

egghead.io