Abgne - abgne.tw - 男丁格爾's 脫殼玩
General Information:
Latest News:
[AngularJS]AngularJS 入門教學 - Filters(一) 26 Aug 2013 | 05:55 pm
我們在 AngularJS 入門教學 - ngRepeat (一) 中有使用到過濾器(Filters)的基本用法。但其實除了過濾之外，還有些內容轉換到的功能。所以現在讓筆者來將內建的過濾器(Filters)一一介紹給各位看看囉！ 先準備好基本的 HTML 區塊就好： 檢視原始碼 HTML 然後，在新增 js/controller.js，並建立一個 FilterCtrl： 檢視原始碼 Jav...
[AngularJS]AngularJS 入門教學 - ngClick 與 ngDblclick(二) 25 Aug 2013 | 02:09 am
在上一篇中我們已經學會如何在 Controller 中新增函式來讓 ng-click 能運作，同時也能動態新增及刪除朋友清單了。現在則是要來看看如何更新朋友的資料。 先來看最後的效果： 筆者想要做到連點滑鼠兩下後就能在原地編輯(In-place editing)。所以這邊除了使用 ng-dblclick 之外，還利用了 ng-show 及 ng-hide 來做了點手腳： 檢視原始碼 HTML...
[AngularJS]AngularJS 入門教學 - ngClick 與 ngDblclick(一) 24 Aug 2013 | 08:48 pm
上一篇中我們已經知道如何使用 ng-repeat 來將陣列中的元素一一列出並產生畫面，但畢竟資料算都是不變的。所以今天筆者除了要教各位如何動態新增及刪除資料之外，還會多介紹一個新的宣告式語法(Directives Syntax) - ng-click 及 ng-dblclick。 這邊的範例就先以上一篇的內容為主： 檢視原始碼 HTML 預覽時應該會看到每筆資料都一一排列出來，並顯示出目前共...
[AngularJS]AngularJS 入門教學 - ngRepeat (二) 23 Aug 2013 | 08:08 pm
上一篇已經見識過 ng-repeat 的威力的，但它其實還有額外提供一些可能會用到的變數。 像是假設筆者想在第一筆資料前方加個 span 區塊，然後顯示"第一筆"的訊息時，就能使用 ng-show 來搭配 $first 的變數： 檢視原始碼 HTML 也能搭配 CSS 做運用呢！像是這樣： 檢視原始碼 HTML 然後 CSS 新增一個 .friend-first-true 的類別： 檢...
[AngularJS]AngularJS 入門教學 - ngRepeat (一) 22 Aug 2013 | 08:44 pm
有用過 Smarty 的都知道 foreach 的好用，就像一般我們在寫程式中若需要做一些重覆性的輸出都會使用類似 for 或是 foreach 的功能，而 AngularJS 則是提供了 ng-repeat 來讓我們達到類似效果。 打開我們的 practice/index.html： 檢視原始碼 HTML 假設我們也想要產生一樣的清單的話，首先針對 div 加上 ng-controller...
[AngularJS]AngularJS 入門教學 - ngShow 與 ngHide 21 Aug 2013 | 04:08 am
常常我們會依某些欄位的值或是狀態來決定是否顯示或隱藏某些元素內容，所以 AngularJS 也有提供方便的宣告式語法(Directives Syntax)讓我們直接來做 model 的綁定使用。 先開啟 HTML 來加入相關程式(practice/index.html)： 檢視原始碼 HTML 筆者希望一開始 h2 是先隱藏起來的，然後當勾選 Show? 之後才顯示，所以我們得將勾選框設定為...
[AngularJS]AngularJS 入門教學 - Controller 20 Aug 2013 | 04:23 am
在我們的 AngularJS 入門教學 - Hello AngularJS!! 中可以透過輸入方塊來改變我們 ng-model 的值，現在則是要教各位如何透過 JavaScript 改變 ng-model 來觸發雙向綁定的效果。 因為 AngularJS 算是一個 MVC 的框架，所以 HTML 就是 V，而事件的處理就是由 JavaScript 來扮演 C 的角色，至於 M 的話，就是那些跟 ...
[AngularJS]AngularJS 入門教學 - Hello AngularJS!! 19 Aug 2013 | 01:03 pm
上課時有同學問到說是否能用 JavaScript 做出欄位跟變數是雙向綁定的效果，其實蠻多標榜 MV* 框架基本上都會有支援的，像是筆者現在要介紹的 AngularJS。 AngularJS 是由 Google 開發並進行推廣的，透過簡單的宣告式語法(Directives Syntax)就能立即產生資料綁定的效果，讓加快開發 Web 應用程式的速度及程式的複雜度。說再多可能都很難懂它能做什麼，就...
[jQ]Responsive Tables 22 Jul 2013 | 01:12 pm
Responsive Tables 基本上不用寫任何程式就能在 RWD 時自動產生類似 Excel 凍結欄位的外掛套件！只要將要套上效果的表格中加入 .responsive 樣式名稱就可以了。 套件名稱：Responsive Tables 套件網址：N/A 作者網站：http://zurb.com/playground/responsive-tables 套件網址：N/A 發佈日期：20...
[jQ]Responsive Table Plugin 21 Jul 2013 | 08:24 pm
Responsive Table Plugin 是一個能產生類似 Excel 凍結欄位的外掛套件，同時可以運用在 RWD 設計的網頁中！ 套件名稱：Responsive Table Plugin 套件網址：N/A 作者網站：http://declanbright.xtreemhost.com/jquery-plugin-responsive-table 套件網址：N/A 發佈日期：201...
