Category Archives: AngularJS

[AngularJS]ngChecked

在 AngularJS 中操作 Checkbox 有非常多的小技巧可以使用開發上更為方便。

在使用上,一樣是直接在 input 上掛上 ng-model 來控制,另外可以透過 ng-true-value 、 ng-false-value 來控制 value,如果要初始化決定是否已點擊時則是透過 ng-checked 來判斷。

HTML

Javascript

Continue Reading

[AngularJS]ngRepeat

ng-repeat 是 angular 中可以用來透過迴圈方式來取得陣列中各個 item 值的方法

基本範例 main.js

注意 ng-repeat 並不是一般迴圈用法而已,以下這個例子會產生錯誤:

解決方法是在 ng-repeat 中描述要依照 item 走訪

Continue Reading

[AngularJS]UI Bootstrap

UI Bootstrap 是 AngularUI Team 提供可以與 Bootstrap 結合的 AngularJS module

注意:因為 UI Bootstrap 的版面部份還是依賴 Bootstrap 的 css,因此使用前還是需要下載 Bootstrap 的 css 和 fonts

bower 安裝

注意:因為有些 module 會用到 template ,所以記得引入 ui-bootstrap-tpls.min.js

補充:Bootstrap 中,特定的 class 有時並不會是 HTML 的 a 元素,因此在畫面上就不會有滑鼠連結的指標出現,UI Bootstrap 官網建議可以自行手動補上

引入 AngularJS 中 引入 UI Bootstrap

Accordion 範例 HTML

Javascript

Continue Reading

[AngularJS]$inject

因為 AngularJS Dependency Injection 的關係,因此在 Controller 傳入參數時,如果要使用特定的物件必須將名稱設定成固定的關鍵字(ex: $scope, $http)

但是如果要將 javascript minification 的話,帶入的參數名稱勢必會被取代,因此可以透過 AngularJS 中的 $inject 解決這個問題

一般 Controller

Module 中的 Controller

Continue Reading

[AngularJS]Directive

AngularJS 中除了可以用預設的 宣告式語法(Directive) 之外,也可以自訂自己需要用的 宣告式語法

例如自訂一個 sayhello tag

Directive Definition Object

要自訂 directive 必須透過一個回傳物件來定義你的操作 這邊紀錄幾個比較常用的 option

priority priority 是用來負責控制優先權,決定哪一個語法要先執行,預設是 0 (ng-repeat 的 priority 是 1000)

terminal 如果設為true,在有設priority的多個directive下,執行到此directive之後就會停止

restrict restrict 有四個選擇可以讓你決定自訂的語法要是什麼型態

E – 元素(Element name): A – 屬性(Attribute) (default): C – 類別(Class): M – 註解(Comment):

template 使用template render html HTML

Javascript

replace 若為true則會用template取代原本的HTML元素,若為false會將元素塞到到原本的tag裡面

範例 HTML

Javascript

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