AngularJS 實例


實例

您可以在線編輯實例,然後點擊按鈕查看結果。

AngularJS 實例

<div ng-app=""> <p>名字 : <input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1> </div>

嚐試一下 »


AngularJS 基礎

我的第一個 AngularJS 表達式
我的第一個 AngularJS 指令
我的第一個 AngularJS 指令(帶有有效的 HTML5)
AngularJS 控製器

基礎的 AngularJS 講解


AngularJS 表達式

簡單的表達式
不使用 ng-app 的表達式
帶有數字的表達式
使用帶有數字的 ng-bind
帶有字符串的表達式
使用帶有字符串的 ng-bind
帶有對象的表達式
使用帶有對象的 ng-bind
帶有數組的表達式
使用帶有數組的 ng-bind

表達式講解


AngularJS 指令

AngularJS 指令
ng-model 指令
ng-repeat 指令(帶有數組)
ng-repeat 指令(帶有對象)

指令講解


AngularJS 控製器

AngularJS 控製器
控製器屬性
控製器函數
JavaScript 文件中的控製器 I
JavaScript 文件中的控製器 II

控製器講解


AngularJS 過濾器

表達式過濾器 uppercase
表達式過濾器 lowercase
貨幣過濾器表達式
指令過濾器 orderBy
輸入過濾器

過濾器講解


AngularJS XMLHttpRequest

讀取靜態 JSON 文件

XMLHttpRequest 解析


AngularJS 表格

顯示一個表格 (簡單)
帶有 CSS 樣式的表格
表格排序
使用 uppercase 過濾器的表格
使用序號的表格
使用 even 和 odd 表格


AngularJS - 從數據庫中讀取數據

從 MySQL 數據庫中讀取數據
從 SQL Server 數據庫中讀取數據

AngularJS SQL 解析


AngularJS HTML DOM

ng-disabled 指令
ng-show 指令
ng-hide 指令

HTML DOM 解析


AngularJS 事件

ng-click 指令
ng-hide 指令
ng-show 指令

HTML 事件解析


AngularJS 模塊

在 body 中的 AngularJS 模塊
在文件中 AngularJS 模塊

AngularJS 模塊解析


AngularJS 表單

AngularJS 表單
AngularJS 驗證

AngularJS 表單解析


AngularJS API

AngularJS angular.lowercase()
AngularJS angular.uppercase()
AngularJS angular.isString()
AngularJS angular.isNumber()

API 解析


AngularJS Bootstrap

AngularJS 使用 Bootstrap
AngularJS 使用 Bootstrap 並使用包含文件功能

Bootstrap 解析


AngularJS 應用

AngularJS 筆記應用
AngularJS 備忘錄應用

AngularJS 應用