[CSS]pseudo-element

實際上來說,CSS 中的偽元素在HTML上是不存在的,使用的時機通常都是針對某樣元素特殊處理時才會用到

常用的 pseudo-element:

::first-line

可以指定 p 元素第一行的樣式 ::first-letter

可以指定 p 元素第一個字的樣式 ::selection

定義使用者反白後的效果 ::before

在元素之前插入內容 ::after

在元素之後插入內容

範例 HTML

first-line and first-letter

selection

Continue Reading

[Laravel]Blade + AngularJS

在 Laravel 的 Blade 中如果同時使用 AngularJS 會造成衝突,因為 parser 的標籤都是由兩個大括號組成,因此解決的方法就是選擇一個替換 parser 標籤

AngularJS

Laravel

Continue Reading

[AngularJS]ngOptions

ng-options 是 AngularJS 中快速產生 option 的方法,而且 ng-options 使用上非常靈活,因此在不同狀況下使用方法都會有所差異

資料物件

1.label for value in array 基本下拉選單

自訂下拉選單

自訂 value

2.label group by group for value in array 加入 optgroup 分類

Continue Reading

[AngularJS]Factory

在一個 Module 中可能會需要有一些資源是要在各個 Controller 共用,這時就可以利用 AngularJS 的 Factory

使用方法

Continue Reading

[AngularJS]$http

在 AngularJS 中如果要使用 AJAX 就必須透過 $http 這個物件來處理

基本用法

module.js

$http.post $http 也提供了快速使用 HTTP Verbs,例如直接使用 POST 注意:由於 AngularJS 的 POST 預設用的 Content-Type 是 application/json;charset=utf-8,而且也不會對資料做serialize的處理,如果直接使用後端會抓不到 POST 的資料

$http.post的使用方法很簡單

在沒有任何修改狀況下,PHP 必須要用 input 取得資料

當然也可以利用 jQuery 的 $.post ,缺點就是還要另外載入 jQuery

又或者按照網路上 這裡 提供的方法,自己處理Serialize

其他用法可直接參考官網文件

Continue Reading

[AngularJS]$rootScope

$rootScope 是 AngularJS app 中最上層的 scope,一個 app(ng-app) 只會有一個 $rootScope,也就是說同一個 app 可以共用同一個 $rootScope 的值

範例 module.js

Continue Reading