AngularJS ng-model 指令模型)
ng-model 指令用于綁定應用程序數據到 HTML 控制器(input, select, textarea)的值。
ng-model 指令
ng-model 指令可以將輸入域的值與 AngularJS 創建的變量綁定。
// AngularJS 實例
<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>
雙向綁定
雙向綁定，在修改輸入域的值時， AngularJS 屬性的值也將修改：
// AngularJS 實例
<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
<h1>你輸入了: {{name}}</h1>
<!-- 或者使用 ng-bind -->
<h1>你輸入了: <span ng-bind="name"></span></h1>
</div>
驗證用戶輸入
// AngularJS 實例
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一個合法的郵箱地址</span>
</form>
嘗試一下 ?
<small>以上實例中，提示信息會在 ng-show 屬性返回 true 的情況下顯示。</small>
應用狀態
ng-model 指令可以為應用數據提供狀態值(invalid, dirty, touched, error):
// AngularJS 實例
<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<h1>狀態</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>
CSS 類
ng-model 指令基于它們的狀態為 HTML 元素提供了 CSS 類：
// AngularJS 實例
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
輸入你的名字:
<input name="myAddress" ng-model="text" required>
</form>
嘗試一下 ?
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 實例
// 控制器中的屬性對應了視圖上的屬性：
<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>
嘗試一下 ?
<small>當在控制器中添加 $scope 對象時，視圖 (HTML) 可以獲取了這些屬性。
視圖中，你不需要添加 $scope 前綴, 只需要添加屬性名即可，如： {{carname}}。</small>
Scope 概述
AngularJS 應用組成如下：
- View(視圖), 即 HTML。
- Model(模型), 當前視圖中可用的數據。
- Controller(控制器), 即 JavaScript 函數，可以添加或修改屬性。
scope 是模型。
scope 是一個 JavaScript 對象，帶有屬性和方法，這些屬性和方法可以在視圖和控制器中使用。
<small>AngularJS 實例
如果你修改了視圖，模型和控制器也會相應更新：</small>
<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 Dow";
});
</script>
Scope 作用范圍
了解你當前使用的 scope 是非常重要的。
在以上兩個實例中，只有一個作用域 scope，所以處理起來比較簡單，但在大型項目中， HTML DOM 中有多個作用域，這時你就需要知道你使用的 scope 對應的作用域是哪一個。
<small>AngularJS 實例
當我們使用 ng-repeat 指令時，每個重復項都訪問了當前的重復對象:</small>
<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>
嘗試一下 ?
<small>每個 < li> 元素可以訪問當前的重復對象，這里對應的是一個字符串， 并使用變量 x 表示。</small>
根作用域
所有的應用都有一個 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整個應用中。是各個 controller 中 scope 的橋梁。用 rootscope 定義的值，可以在各個 controller 中使用。
<small>AngularJS 實例
創建控制器時，將 $rootScope 作為參數傳遞，可在應用中使用：</small>
<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>
AngularJS 控制器
AngularJS 控制器 控制 AngularJS 應用程序的數據。
AngularJS 控制器是常規的 JavaScript 對象。
AngularJS 控制器
AngularJS 應用程序被控制器控制。
ng-controller 指令定義了應用程序控制器。
控制器是 JavaScript 對象，由標準的 JavaScript 對象的構造函數 創建。
<small>AngularJS 實例</small>
<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>
嘗試一下 ?
<small>應用解析：
AngularJS 應用程序由 ng-app 定義。應用程序在 <div> 內運行。
ng-controller="myCtrl" ?屬性是一個 AngularJS 指令。用于定義一個控制器。
myCtrl 函數是一個 JavaScript 函數。
AngularJS 使用$scope 對象來調用控制器。
在 AngularJS 中， $scope 是一個應用對象(屬于應用變量和函數)。
控制器的 $scope （相當于作用域、控制范圍）用來保存AngularJS Model(模型)的對象。
控制器在作用域中創建了兩個屬性 (firstName 和 lastName)。
ng-model 指令綁定輸入域到控制器的屬性（firstName 和 lastName）。</small>
控制器方法
<small>上面的實例演示了一個帶有 lastName 和 firstName 這兩個屬性的控制器對象。
控制器也可以有方法（變量和函數）：</small>
AngularJS 實例
<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>
外部文件中的控制器
<small>在大型的應用程序中，通常是把控制器存儲在外部文件中。
只需要把 <script> 標簽中的代碼復制到名為 personController.js 的外部文件中即可：
AngularJS 實例</small>
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script src="personController.js"></script>
其他實例
<small>以下實例創建一個新的控制器文件:
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
保存文件為 namesController.js:
然后，在應用中使用控制器文件:
AngularJS 實例</small>
<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>
AngularJS 過濾器
<small>過濾器可以使用一個管道字符（|）添加到表達式和指令中。</small>
AngularJS 過濾器
AngularJS 過濾器可用于轉換數據：
表達式中添加過濾器
<small>過濾器可以通過一個管道字符（|）和一個過濾器添加到表達式中。.
(（下面的兩個實例，我們將使用前面章節中提到的 person 控制器）)
uppercase 過濾器將字符串格式化為大寫：
AngularJS 實例
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名為 {{ lastName | uppercase }}</p>
</div>
</small>
嘗試一下 ?
<small>lowercase 過濾器將字符串格式化為小寫：
AngularJS 實例</small>
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名為 {{ lastName | lowercase }}</p>
</div>
currency 過濾器
<small>currency 過濾器將數字格式化為貨幣格式：
AngularJS 實例</small>
<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>
向指令添加過濾器
<small>過濾器可以通過一個管道字符（|）和一個過濾器添加到指令中。
orderBy 過濾器根據表達式排列數組：
AngularJS 實例</small>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
過濾輸入
<small>輸入過濾器可以通過一個管道字符（|）和一個過濾器添加到指令中，該過濾器后跟一個冒號和一個模型名稱。
filter 過濾器從數組中選擇一個子集：
AngularJS 實例</small>
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | marked" style="border: 0px; margin: 0px; padding: 0px;">filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
