全面掌握前端框架AngularJS
整理自菜鳥教程
AngularJS
AngularJS 通過新的屬性和表示式擴充套件了 HTML。
AngularJS 可以構建一個單一頁面應用程式（SPAs：Single Page Applications）。
AngularJS 學習起來非常簡單。
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
AngularJS 歷史
AngularJS 是比較新的技術，版本 1.0 是在 2012 年釋出的。
AngularJS 是由 Google 的員工 Miško Hevery 從 2009 年開始著手開發。
這是一個非常好的構想，該專案目前已由 Google 正式支援，有一個全職的開發團隊繼續開發和維護這個庫。
AngularJS 簡介
AngularJS 是一個 JavaScript 框架。它可通過 <script> 標籤新增到 HTML 頁面。
AngularJS 通過 指令擴充套件了 HTML，且通過 表示式繫結資料到 HTML。
AngularJS 是一個 JavaScript 框架
AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。
AngularJS 是以一個 JavaScript 檔案形式釋出的，可通過 script 標籤新增到網頁中：
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
建議把指令碼放在 <body> 元素的底部。
這會提高網頁載入速度，因為 HTML 載入不受制於指令碼載入。
AngularJS 擴充套件了 HTML
AngularJS 通過 ng-directives 擴充套件了 HTML。
ng-app 指令定義一個 AngularJS 應用程式。
ng-model 指令把元素值（比如輸入域的值）繫結到應用程式。
ng-bind 指令把應用程式資料繫結到 HTML 檢視。
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
例項講解：
當網頁載入完畢，AngularJS 自動開啟。
ng-app 指令告訴 AngularJS，<div> 元素是 AngularJS 應用程式 的"所有者"。
ng-model 指令把輸入域的值繫結到應用程式變數 name。
ng-bind 指令把應用程式變數 name 繫結到某個段落的 innerHTML。
如果您移除了 ng-app 指令，HTML 將直接把表示式顯示出來，不會去計算表示式的結果。
什麼是 AngularJS？
AngularJS 使得開發現代的單一頁面應用程式（SPAs：Single Page Applications）變得更加容易。
- AngularJS 把應用程式資料繫結到 HTML 元素。
- AngularJS 可以克隆和重複 HTML 元素。
- AngularJS 可以隱藏和顯示 HTML 元素。
- AngularJS 可以在 HTML 元素"背後"新增程式碼。
- AngularJS 支援輸入驗證。
AngularJS 指令
正如您所看到的，AngularJS 指令是以 ng 作為字首的 HTML 屬性。
ng-init 指令初始化 AngularJS 應用程式變數。
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="firstName='John'">
<p>姓名為 <span ng-bind="firstName"></span></p>
</div>
</body>
</html>
HTML5 允許擴充套件的（自制的）屬性，以 data- 開頭。
AngularJS 屬性以 ng- 開頭，但是您可以使用 data-ng- 來讓網頁對 HTML5 有效。
帶有有效的 HTML5：
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div data-ng-app="" data-ng-init="firstName='John'">
<p>姓名為 <span data-ng-bind="firstName"></span></p>
</div>
</body>
</html>
AngularJS 表示式
AngularJS 表示式寫在雙大括號內：{{ expression }}。
AngularJS 表示式把資料繫結到 HTML，這與 ng-bind 指令有異曲同工之妙。
AngularJS 將在表示式書寫的位置"輸出"資料。
AngularJS 表示式 很像 JavaScript 表示式：它們可以包含文字、運算子和變數。
例項 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>我的第一個表示式： {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS 應用
AngularJS 模組（Module） 定義了 AngularJS 應用。
AngularJS 控制器（Controller） 用於控制 AngularJS 應用。
ng-app指令指明瞭應用, ng-controller 指明瞭控制器。
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<p>嘗試修改以下表單。</p>
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
</body>
</html>
AngularJS 模組定義應用:
AngularJS 模組
var app = angular.module('myApp', []);
AngularJS 控制器控制應用:
AngularJS 控制器
app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; });
在接下來的教程中你將學習到更多的應用和模組的知識。
在 Cloud Studio 中使用 AngularJS
-
step1：訪問 Cloud Studio，註冊/登入賬戶。
-
step2：在右側的執行環境選單選擇：
"ubuntu"
-
step3：在左側程式碼目錄中新建 html 目錄，編寫你的 HTML 程式碼，例如 index.html
-
step4：在 index.html 檔案的中貼上如下程式碼、來引入 AngularJS：
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
-
step5：在終端中輸入命令
sudo vim /etc/nginx/site-enable/default。將配置檔案紅框部分修改為如下圖所示，然後輸入命令：sudo nginx restart重啟 nginx 服務（ nginx 安裝完成並啟動後預設會監聽80埠。我們需要將 nginx 的站點目錄以及監聽的埠號改為我們需要的）
-
step6：點選最右側的【訪問連結】選項卡，在訪問連結面板中填寫埠號為：8080（和剛才 nginx 配置檔案中的埠號一致），點選建立連結，即可點選生成的連結訪問我們剛剛編寫的程式碼，檢視 AngularJS 效果。
AngularJS 表示式
AngularJS 使用 表示式 把資料繫結到 HTML。
AngularJS 表示式
AngularJS 表示式寫在雙大括號內：{{ expression }}。
AngularJS 表示式把資料繫結到 HTML，這與 ng-bind 指令有異曲同工之妙。
AngularJS 將在表示式書寫的位置"輸出"資料。
AngularJS 表示式 很像 JavaScript 表示式：它們可以包含文字、運算子和變數。
例項 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app>
<p>我的第一個表示式: {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS 數字
AngularJS 數字就像 JavaScript 數字：
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>總價: {{ quantity * cost }}</p>
</div>
</body>
</html>
div ng-app="" ng-init="quantity=1;cost=5"> <p>總價： {{ quantity * cost }}</p> </div>
使用 ng-bind 的相同例項：
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>總價: <span ng-bind="quantity * cost"></span></p>
</div>
</body>
</html>
使用 ng-init 不是很常見。您將在控制器一章中學習到一個更好的初始化資料的方式。
AngularJS 字串
AngularJS 字串就像 JavaScript 字串：
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名: {{ firstName + " " + lastName }}</p>
</div>
</body>
</html>
使用 ng-bind 的相同例項：
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名: <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
</body>
</html>
AngularJS 物件
AngularJS 物件就像 JavaScript 物件：
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓為 {{ person.lastName }}</p>
</div>
</body>
</html>
使用 ng-bind 的相同例項：
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓為 <span ng-bind="person.lastName"></span></p>
</div>
</body>
</html>
AngularJS 陣列
AngularJS 陣列就像 JavaScript 陣列：
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三個值為 {{ points[2] }}</p>
</div>
</body>
</html>
使用 ng-bind 的相同例項：
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三個值為 <span ng-bind="points[2]"></span></p>
</div>
</body>
</html>
AngularJS 表示式 與 JavaScript 表示式
類似於 JavaScript 表示式，AngularJS 表示式可以包含字母，操作符，變數。
與 JavaScript 表示式不同，AngularJS 表示式可以寫在 HTML 中。
與 JavaScript 表示式不同，AngularJS 表示式不支援條件判斷，迴圈及異常。
與 JavaScript 表示式不同，AngularJS 表示式支援過濾器。
AngularJS 指令
AngularJS 通過被稱為 指令 的新屬性來擴充套件 HTML。
AngularJS 通過內建的指令來為應用新增功能。
AngularJS 允許你自定義指令。
AngularJS 指令
AngularJS 指令是擴充套件的 HTML 屬性，帶有字首 ng-。
ng-app 指令初始化一個 AngularJS 應用程式。
ng-init 指令初始化應用程式資料。
ng-model 指令把元素值（比如輸入域的值）繫結到應用程式。
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="firstName='John'">
<p>在輸入框中嘗試輸入:</p>
<p>姓名: <input type="text" ng-model="firstName"></p>
<p>你輸入的為: {{ firstName }}</p>
</div>
</body>
</html>
ng-app 指令告訴 AngularJS，<div> 元素是 AngularJS 應用程式 的"所有者"。
資料繫結
上面例項中的 {{ firstName }} 表示式是一個 AngularJS 資料繫結表示式。
AngularJS 中的資料繫結，同步了 AngularJS 表示式與 AngularJS 資料。
{{ firstName }} 是通過 ng-model="firstName" 進行同步。
在下一個例項中，兩個文字域是通過兩個 ng-model 指令同步的：
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div data-ng-app="" data-ng-init="quantity=1;price=5">
<h2>價格計算器</h2>
數量: <input type="number" ng-model="quantity">
價格: <input type="number" ng-model="price">
<p><b>總價:</b> {{quantity * price}}</p>
</div>
</body>
</html>
重複 HTML 元素
ng-repeat 指令會重複一個 HTML 元素：
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div data-ng-app="" data-ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 來迴圈陣列</p>
<ul>
<li data-ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
</body>
</html>
ng-repeat 指令用在一個物件陣列上：
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>迴圈物件:</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}</li>
</ul>
</div>
</body>
</html>
AngularJS 完美支援資料庫的 CRUD（增加Create、讀取Read、更新Update、刪除Delete）應用程式。
把例項中的物件想象成資料庫中的記錄。
ng-app 指令
ng-app 指令定義了 AngularJS 應用程式的 根元素。
ng-app 指令在網頁載入完畢時會自動引導（自動初始化）應用程式。
稍後您將學習到 ng-app 如何通過一個值（比如 ng-app="myModule"）連線到程式碼模組。
ng-init 指令
ng-init 指令為 AngularJS 應用程式定義了 初始值。
通常情況下，不使用 ng-init。您將使用一個控制器或模組來代替它。
稍後您將學習更多有關控制器和模組的知識。
ng-model 指令
ng-model 指令 繫結 HTML 元素 到應用程式資料。
ng-model 指令也可以：
- 為應用程式資料提供型別驗證（number、email、required）。
- 為應用程式資料提供狀態（invalid、dirty、touched、error）。
- 為 HTML 元素提供 CSS 類。
- 繫結 HTML 元素到 HTML 表單。
ng-repeat 指令
ng-repeat 指令對於集合中（陣列中）的每個項會 克隆一次 HTML 元素。
建立自定義的指令
除了 AngularJS 內建的指令外，我們還可以建立自定義指令。
你可以使用 .directive 函式來新增自定義的指令。
要呼叫自定義指令，HTML 元素上需要新增自定義指令名。
使用駝峰法來命名一個指令， runoobDirective, 但在使用它時需要以 - 分割, runoob-directive:
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定義指令!</h1>"
};
});
</script>
</body>
</html>
你可以通過以下方式來呼叫指令：
- 元素名
- 屬性
- 類名
- 註釋
以下例項方式也能輸出同樣結果:
元素名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定義指令!</h1>"
};
});
</script>
</body>
</html>
屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div runoob-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定義指令!</h1>"
};
});
</script>
</body>
</html>
類名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div class="runoob-directive"></div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "C",
template : "<h1>自定義指令!</h1>"
};
});
</script>
<p><strong>注意：</strong> 你必須設定 <b>restrict</b> 的值為 "C" 才能通過類名來呼叫指令。</p>
</body>
</html>
註釋
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<!-- directive: runoob-directive -->
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "M",
replace : true,
template : "<h1>自定義指令!</h1>"
};
});
</script>
<p><strong>注意：</strong> 我們需要在該例項新增 <strong>replace</strong> 屬性， 否則評論是不可見的。</p>
<p><strong>注意：</strong> 你必須設定 <b>restrict</b> 的值為 "M" 才能通過註釋來呼叫指令。</p>
</body>
</html>
!-- directive: runoob-directive -->
限制使用
你可以限制你的指令只能通過特定的方式來呼叫。
例項
通過新增 restrict 屬性,並設定值為 "A", 來設定指令只能通過屬性的方式來呼叫:
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<div runoob-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "A",
template : "<h1>自定義指令!</h1>"
};
});
</script>
<p><strong>注意：</strong> 通過設定 <strong>restrict</strong> 屬性值為 "A" 來設定指令只能通過 HTML 元素的屬性來呼叫。</p>
</body>
</html>
restrict 值可以是以下幾種:
E作為元素名使用A作為屬性使用C作為類名使用M作為註釋使用
restrict 預設值為 EA, 即可以通過元素名和屬性名來呼叫指令。
AngularJS ng-model 指令
ng-model 指令用於繫結應用程式資料到 HTML 控制器(input, select, textarea)的值。
ng-model 指令
ng-model 指令可以將輸入域的值與 AngularJS 建立的變數繫結。
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
<p>使用 ng-model 指令來繫結輸入域的值到控制器的屬性。</p>
</body>
</html>
雙向繫結
雙向繫結，在修改輸入域的值時， AngularJS 屬性的值也將修改：
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
<h1>你輸入了: {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
<p>修改輸入框的值，標題的名字也會相應修改。</p>
</body>
</html>
驗證使用者輸入
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一個合法的郵箱地址</span>
</form>
<p>在輸入框中輸入你的郵箱地址，如果不是一個合法的郵箱地址，會彈出提示資訊。</p>
</body>
</html>
以上例項中，提示資訊會在 ng-show 屬性返回 true 的情況下顯示。
應用狀態
ng-model 指令可以為應用資料提供狀態值(invalid, dirty, touched, error):
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<form ng-app="" name="myForm" ng-init="myText = '[email protected]'">
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<p>編輯郵箱地址，檢視狀態的改變。</p>
<h1>狀態</h1>
<p>Valid: {{myForm.myAddress.$valid}} (如果輸入的值是合法的則為 true)。</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改變則為 true)。</p>
<p>Touched: {{myForm.myAddress.$touched}} (如果通過觸屏點選則為 true)。</p>
</form>
</body>
</html>
CSS 類
ng-model 指令基於它們的狀態為 HTML 元素提供了 CSS 類：
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
</head>
<body>
<form ng-app="" name="myForm">
輸入你的名字:
<input name="myName" ng-model="myText" required>
</form>
<p>編輯文字域，不同狀態背景顏色會發生變化。</p>
<p>文字域添加了 required 屬性，該值是必須的，如果為空則是不合法的。</p>
</body>
</html>
ng-model 指令根據表單域的狀態新增/移除以下類：
- ng-empty
- ng-not-empty
- ng-touched
- ng-untouched
- ng-valid
- ng-invalid
- ng-dirty
- ng-pending
- ng-pristine
AngularJS Scope(作用域)
Scope(作用域) 是應用在 HTML (檢視) 和 JavaScript (控制器)之間的紐帶。
Scope 是一個物件，有可用的方法和屬性。
Scope 可應用在檢視和控制器上。
如何使用 Scope
當你在 AngularJS 建立控制器時，你可以將 $scope 物件當作一個引數傳遞:
AngularJS 例項
控制器中的屬性對應了檢視上的屬性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>
<p>控制器中建立一個屬性名 "carname"，對應了檢視中使用 {{ }} 中的名稱。</p>
</body>
</html>
當在控制器中新增 $scope 物件時，檢視 (HTML) 可以獲取了這些屬性。
檢視中，你不需要新增 $scope 字首, 只需要新增屬性名即可，如： {{carname}}。
Scope 概述
AngularJS 應用組成如下：
- View(檢視), 即 HTML。
- Model(模型), 當前檢視中可用的資料。
- Controller(控制器), 即 JavaScript 函式，可以新增或修改屬性。
scope 是模型。
scope 是一個 JavaScript 物件，帶有屬性和方法，這些屬性和方法可以在檢視和控制器中使用。
AngularJS 例項
如果你修改了檢視，模型和控制器也會相應更新：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>{{greeting}}</h1>
<button ng-click='sayHello()'>點我</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Runoob";
$scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.name + '!';
};
});
</script>
<p>當你修改輸入框中的值時，會影響到模型(model),當然也會影響到控制器對應的屬性值。</p>
</body>
</html>
Scope 作用範圍
瞭解你當前使用的 scope 是非常重要的。
在以上兩個例項中，只有一個作用域 scope，所以處理起來比較簡單，但在大型專案中， HTML DOM 中有多個作用域，這時你就需要知道你使用的 scope 對應的作用域是哪一個。
AngularJS 例項
當我們使用 ng-repeat 指令時，每個重複項都訪問了當前的重複物件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});
</script>
</body>
</html>
每個 <li> 元素可以訪問當前的重複物件，這裡對應的是一個字串， 並使用變數 x 表示。
根作用域
所有的應用都有一個 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用於整個應用中。是各個 controller 中 scope 的橋樑。用 rootscope 定義的值，可以在各個 controller 中使用。
AngularJS 例項
建立控制器時，將 $rootScope 作為引數傳遞，可在應用中使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>姓氏為 {{lastname}} 家族成員:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes";
});
</script>
<p>注意 $rootScope 在迴圈物件內外都可以訪問。</p>
</body>
</html>
AngularJS 控制器
AngularJS 控制器 控制 AngularJS 應用程式的資料。
AngularJS 控制器是常規的 JavaScript 物件。
AngularJS 控制器
AngularJS 應用程式被控制器控制。
ng-controller 指令定義了應用程式控制器。
控制器是 JavaScript 物件，由標準的 JavaScript 物件的建構函式 建立。
AngularJS 例項
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</body>
</html>
應用解析：
AngularJS 應用程式由 ng-app 定義。應用程式在 <div> 內執行。
ng-controller="myCtrl" 屬性是一個 AngularJS 指令。用於定義一個控制器。
myCtrl 函式是一個 JavaScript 函式。
AngularJS 使用$scope 物件來呼叫控制器。
在 AngularJS 中， $scope 是一個應用物件(屬於應用變數和函式)。
控制器的 $scope （相當於作用域、控制範圍）用來儲存AngularJS Model(模型)的物件。
控制器在作用域中建立了兩個屬性 (firstName 和 lastName)。
ng-model 指令繫結輸入域到控制器的屬性（firstName 和 lastName）。
控制器方法
上面的例項演示了一個帶有 lastName 和 firstName 這兩個屬性的控制器物件。
控制器也可以有方法（變數和函式）：
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
</body>
</html>
外部檔案中的控制器
在大型的應用程式中，通常是把控制器儲存在外部檔案中。
只需要把 <script> 標籤中的程式碼複製到名為personController.js的外部檔案中即可：
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script src="personController.js"></script>
</body>
</html>
其他例項
以下例項建立一個新的控制器檔案:
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
儲存檔案為namesController.js:
然後，在應用中使用控制器檔案:
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
</body>
</html>
AngularJS 過濾器
過濾器可以使用一個管道字元（|）新增到表示式和指令中。
AngularJS 過濾器
AngularJS 過濾器可用於轉換資料：
| 過濾器 | 描述 |
|---|---|
| currency | 格式化數字為貨幣格式。 |
| filter | 從陣列項中選擇一個子集。 |
| lowercase | 格式化字串為小寫。 |
| orderBy | 根據某個表示式排列陣列。 |
| uppercase | 格式化字串為大寫。 |
表示式中新增過濾器
過濾器可以通過一個管道字元（|）和一個過濾器新增到表示式中。.
(下面的兩個例項，我們將使用前面章節中提到的 person 控制器)
uppercase 過濾器將字串格式化為大寫：
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名為 {{ lastName | uppercase }}</p>
</div>
<script src="http://www.runoob.com/try/demo_source/personController.js"></script>
</body>
</html>
lowercase 過濾器將字串格式化為小寫：
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名為 {{ lastName | lowercase }}</p>
</div>
<script src="http://www.runoob.com/try/demo_source/personController.js"></script>
</body>
</html>
currency 過濾器
currency 過濾器將數字格式化為貨幣格式：
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="costCtrl">
數量: <input type="number" ng-model="quantity">
價格: <input type="number" ng-model="price">
<p>總價 = {{ (quantity * price) | currency }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
$scope.quantity = 1;
$scope.price = 9.99;
});
</script>
</body>
</html>
向指令新增過濾器
過濾器可以通過一個管道字元（|）和一個過濾器新增到指令中。
orderBy 過濾器根據表示式排列陣列：
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>迴圈物件:</p>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="//www.runoob.com/try/demo_source/namesController.js"></script>
</body>
</html>
過濾輸入
輸入過濾器可以通過一個管道字元（|）和一個過濾器新增到指令中，該過濾器後跟一個冒號和一個模型名稱。
filter 過濾器從陣列中選擇一個子集：
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>輸入過濾:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
<script src="http://www.runoob.com/try/demo_source/namesController.js"></script>
</body>
</html>
自定義過濾器
以下例項自定義一個過濾器 reverse，將字串反轉：
AngularJS 例項
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
姓名: {{ msg | reverse }}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依賴
return function(text) {
return text.split("").reverse().join("");
}
});
</script>
</body>
</html>
AngularJS 服務(Service)
AngularJS 中你可以建立自己的服務，或使用內建服務。
什麼是服務？
在 AngularJS 中，服務是一個函式或物件，可在你的 AngularJS 應用中使用。
AngularJS 內建了30 多個服務。
有個 $location 服務，它可以返回當前頁面的 URL 地址。
例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p> 當前頁面的url:</p>
<h3>{{myUrl}}</h3>
</div>
<p>該例項使用了內建的 $location 服務獲取當前頁面的 URL。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
</script>
</body>
</html>
注意 $location 服務是作為一個引數傳遞到 controller 中。如果要使用它，需要在 controller 中定義。
為什麼使用服務?
在很多服務中，比如 $location 服務，它可以使用 DOM 中存在的物件，類似 window.location 物件，但 window.location 物件在 AngularJS 應用中有一定的侷限性。
AngularJS 會一直監控應用，處理事件變化， AngularJS 使用 $location 服務比使用 window.location 物件更好。
$location vs window.location
| window.location | $location.service | |
|---|---|---|
| 目的 | 允許對當前瀏覽器位置進行讀寫操作 | 允許對當前瀏覽器位置進行讀寫操作 |
| API | 暴露一個能被讀寫的物件 | 暴露jquery風格的讀寫器 |
| 是否在AngularJS應用生命週期中和應用整合 | 否 | 可獲取到應用生命週期內的每一個階段，並且和$watch整合 |
| 是否和HTML5 API的無縫整合 | 否 | 是（對低階瀏覽器優雅降級） |
| 和應用的上下文是否相關 | 否，window.location.path返回"/docroot/actual/path" | 是，$location.path()返回"/actual/path" |
$http 服務
$http 是 AngularJS 應用中最常用的服務。 服務向伺服器傳送請求，應用響應伺服器傳送過來的資料。
例項
使用 $http 服務向伺服器請求資料:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>歡迎資訊:</p>
<h1>{{myWelcome}}</h1>
</div>
<p> $http 服務向伺服器請求資訊，返回的值放入變數 "myWelcome" 中。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
</script>
</body>
</html>
以上是一個非常簡單的 $http 服務例項。
$timeout 服務
AngularJS $timeout 服務對應了 JS window.setTimeout 函式。
例項
兩秒後顯示資訊:
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>兩秒後顯示資訊:</p>
<h1>{{myHeader}}</h1>
</div>
<p>$timeout 訪問在規定的毫秒數後執行指定函式。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
</script>
</body>
</html>
$interval 服務
AngularJS $interval 服務對應了 JS window.setInterval 函式。
例項
每一秒顯示資訊:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>現在時間是:</p>
<h1>{{theTime}}</h1>
</div>
<p>$interval 訪問在指定的週期(以毫秒計)來呼叫函式或計算表示式。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
</script>
</body>
</html>
建立自定義服務
你可以建立自定義服務，連結到你的模組中：
建立名為hexafy 的服務:
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
要使用自定義服務，需要在定義控制器的時候獨立新增，設定依賴關係:
例項
使用自定義的的服務 hexafy 將一個數字轉換為16進位制數:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>255 的16進位制是:</p>
<h1>{{hex}}</h1>
</div>
<p>自定義服務，用於轉換16進位制數：</p>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
</script>
</body>
</html>
過濾器中，使用自定義服務
當你建立了自定義服務，並連線到你的應用上後，你可以在控制器，指令，過濾器或其他服務中使用它。
在過濾器 myFormat 中使用服務 hexafy:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
在過濾器中使用服務:
<h1>{{255 | myFormat}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
</script>
</body>
</html>
在物件陣列中獲取值時你可以使用過濾器：
建立服務 hexafy:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>在獲取陣列 [255, 251, 200] 值時使用過濾器:</p>
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
<p>過濾器使用服務將10進位制轉換為16進位制。</p>
</div>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
app.controller('myCtrl', function($scope) {
$scope.counts = [255, 251, 200];
});
</script>
</body>
</html>
AngularJS XMLHttpRequest
$http 是 AngularJS 中的一個核心服務，用於讀取遠端伺服器的資料。
使用格式：
// 簡單的 GET 請求，可以改為 POST
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// 請求成功執行程式碼
}, function errorCallback(response) {
// 請求失敗執行程式碼
});
簡寫方法
POST 與 GET 簡寫方法格式：
$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
此外還有以下簡寫方法：
- $http.get
- $http.head
- $http.post
- $http.put
- $http.delete
- $http.jsonp
- $http.patch
讀取 JSON 檔案
以下是儲存在web伺服器上的 JSON 檔案：
http://www.runoob.com/try/angularjs/data/sites.php
{ "sites": [
{ "Name": "angularjs教程", "Url": "www.runoob.com", "Country": "CN" },
{ "Name": "Google", "Url": "www.google.com", "Country": "USA" },
{ "Name": "Facebook", "Url": "www.facebook.com", "Country": "USA" },
{ "Name": "微博", "Url": "www.weibo.com", "Country": "CN" }
]
}
AngularJS $http
AngularJS $http 是一個用於讀取web伺服器上資料的服務。
$http.get(url) 是用於讀取伺服器資料的函式。
廢棄宣告 (v1.5)
v1.5 中
$http的success和error方法已廢棄。使用then方法替代。
通用方法例項
AngularJS1.5 以上版本 - 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.6.3/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="siteCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
$http({
method: 'GET',
url: 'http://www.runoob.com/try/angularjs/data/sites.php'
}).then(function successCallback(response) {
$scope.names = response.data.sites;
}, function errorCallback(response) {
// 請求失敗執行程式碼
});
});
</script>
</body>
</html>
簡寫方法例項
AngularJS1.5 以上版本 - 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.6.3/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="siteCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
$http.get("http://www.runoob.com/try/angularjs/data/sites.php")
.then(function (response) {$scope.names = response.data.sites;});
});
</script>
</body>
</html>
AngularJS1.5 以下版本 - 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="siteCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
$http.get("http://www.runoob.com/try/angularjs/data/sites.php")
.success(function (response) {$scope.names = response.sites;});
});
</script>
</body>
</html>
應用解析:
注意：以上程式碼的 get 請求是本站的伺服器，你不能直接拷貝到你本地執行，會存在跨域問題，解決辦法就是將 Customers_JSON.php 的資料拷貝到你自己的伺服器上
AngularJS 應用通過 ng-app 定義。應用在 <div> 中執行。
ng-controller 指令設定了 controller 物件 名。
函式 customersController 是一個標準的 JavaScript 物件構造器。
控制器物件有一個屬性: $scope.names。
$http.get() 從web伺服器上讀取靜態 JSON 資料。
伺服器資料檔案為：http://www.runoob.com/try/angularjs/data/sites.php。
當從服務端載入 JSON 資料時，$scope.names 變為一個數組。
以上程式碼也可以用於讀取資料庫資料。
AngularJS Select(選擇框)
AngularJS 可以使用陣列或物件建立一個下拉列表選項。
使用 ng-options 建立選擇框
在 AngularJS 中我們可以使用 ng-option 指令來建立一個下拉列表，列表項通過物件和陣列迴圈輸出，如下例項:
例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});
</script>
<p>該例項演示了 ng-options 指令的使用。</p>
</body>
</html>
ng-init 設定預設選中值。
ng-options 與 ng-repeat
我們也可以使用ng-repeat 指令來建立下拉列表：
例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});
</script>
<p>該例項演示了使用 ng-repeat 指令來建立下拉列表。</p>
</body>
</html>
ng-repeat 指令是通過陣列來迴圈 HTML 程式碼來建立下拉列表，但 ng-options 指令更適合建立下拉列表，它有以下優勢：
使用 ng-options 的選項是一個物件， ng-repeat 是一個字串。
應該用哪個更好?
假設我們使用以下物件:
$scope.sites = [
{site : "Google", url : "http://www.google.com"},
{site : "Runoob", url : "http://www.runoob.com"