2015年6月14日 星期日

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

angular-form-gen

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

angular directive for inline-edit

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

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

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

2015年6月12日 星期五

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

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

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


官網文件與sample code其實還算詳細,只是兩種表格沒有說明差別在哪,只好自己try囉....

因為目前用到的部份,資料是非同步抓取回來的,所以目前只用到兩種:

Table with simple $http load resource 感覺上比較適合用在資料量不多,一次全部抓回來使用,因為是透過promise非同步抓取的,所以使用上要搭配watch-resource="collection"才能在資料抓回來之後正常顯示出來。

Table server side 感覺上比較適合資料量較多,尤其是分頁時,一次只抓一頁的量,換頁、改變排序、搜尋或改變每頁顯示數量時都會自動抓取一次資料。

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

2015年6月7日 星期日

[筆記] angularjs 中匯出 Excel 檔

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

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


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端的程式。

運作流程:
  1. 讀入excel檔,xls or xlsx都可以,xlsx為佳
  2. 選擇資料表
  3. 以json格式將資料傳送到server端處理
需要的library與目前使用版本:
檔案結構:



2015年6月4日 星期四

angular-formly

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

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

Github

官網

教學:
Easy AngularJS Forms with angular-formly

egghead.io