AngularJS ng-model 指令模型)
ng-model 指令用于綁定應(yīng)用程序數(shù)據(jù)到 HTML 控制器(input, select, textarea)的值次企。
ng-model 指令
ng-model 指令可以將輸入域的值與 AngularJS 創(chuàng)建的變量綁定。
// AngularJS 實(shí)例
<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>
雙向綁定
雙向綁定，在修改輸入域的值時(shí)舔痕， AngularJS 屬性的值也將修改：
// AngularJS 實(shí)例
<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
<h1>你輸入了: {{name}}</h1>
<!-- 或者使用 ng-bind -->
<h1>你輸入了: <span ng-bind="name"></span></h1>
</div>
驗(yàn)證用戶輸入
// AngularJS 實(shí)例
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一個(gè)合法的郵箱地址</span>
</form>
嘗試一下 ?
<small>以上實(shí)例中，提示信息會(huì)在 ng-show 屬性返回 true 的情況下顯示验残。</small>
應(yīng)用狀態(tài)
ng-model 指令可以為應(yīng)用數(shù)據(jù)提供狀態(tài)值(invalid, dirty, touched, error):
// AngularJS 實(shí)例
<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<h1>狀態(tài)</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>
CSS 類
ng-model 指令基于它們的狀態(tài)為 HTML 元素提供了 CSS 類：
// AngularJS 實(shí)例
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
輸入你的名字:
<input name="myAddress" ng-model="text" required>
</form>
嘗試一下 ?
ng-model 指令根據(jù)表單域的狀態(tài)添加/移除以下類：
- ng-empty
- ng-not-empty
- ng-touched
- ng-untouched
- ng-valid
- ng-invalid
- ng-dirty
- ng-pending
- ng-pristine
AngularJS Scope(作用域)
Scope(作用域) 是應(yīng)用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶忱反。
Scope 是一個(gè)對(duì)象，有可用的方法和屬性祝拯。
Scope 可應(yīng)用在視圖和控制器上甚带。
如何使用 Scope
當(dāng)你在 AngularJS 創(chuàng)建控制器時(shí)，你可以將 $scope 對(duì)象當(dāng)作一個(gè)參數(shù)傳遞:
// AngularJS 實(shí)例
// 控制器中的屬性對(duì)應(yīng)了視圖上的屬性：
<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>當(dāng)在控制器中添加 $scope 對(duì)象時(shí)佳头，視圖 (HTML) 可以獲取了這些屬性鹰贵。
視圖中，你不需要添加 $scope 前綴, 只需要添加屬性名即可康嘉，如： {{carname}}碉输。</small>
Scope 概述
AngularJS 應(yīng)用組成如下：
- View(視圖), 即 HTML。
- Model(模型), 當(dāng)前視圖中可用的數(shù)據(jù)亭珍。
- Controller(控制器), 即 JavaScript 函數(shù)敷钾，可以添加或修改屬性。
scope 是模型肄梨。
scope 是一個(gè) JavaScript 對(duì)象阻荒，帶有屬性和方法，這些屬性和方法可以在視圖和控制器中使用峭范。
<small>AngularJS 實(shí)例
如果你修改了視圖财松，模型和控制器也會(huì)相應(yīng)更新：</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 作用范圍
了解你當(dāng)前使用的 scope 是非常重要的。
在以上兩個(gè)實(shí)例中纱控，只有一個(gè)作用域 scope辆毡，所以處理起來(lái)比較簡(jiǎn)單，但在大型項(xiàng)目中甜害， HTML DOM 中有多個(gè)作用域舶掖，這時(shí)你就需要知道你使用的 scope 對(duì)應(yīng)的作用域是哪一個(gè)。
<small>AngularJS 實(shí)例
當(dāng)我們使用 ng-repeat 指令時(shí)尔店，每個(gè)重復(fù)項(xiàng)都訪問(wèn)了當(dāng)前的重復(fù)對(duì)象:</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>每個(gè) < li> 元素可以訪問(wèn)當(dāng)前的重復(fù)對(duì)象眨攘，這里對(duì)應(yīng)的是一個(gè)字符串， 并使用變量 x 表示嚣州。</small>
根作用域
所有的應(yīng)用都有一個(gè) $rootScope鲫售，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整個(gè)應(yīng)用中该肴。是各個(gè) controller 中 scope 的橋梁情竹。用 rootscope 定義的值，可以在各個(gè) controller 中使用匀哄。
<small>AngularJS 實(shí)例
創(chuàng)建控制器時(shí)秦效，將 $rootScope 作為參數(shù)傳遞雏蛮，可在應(yīng)用中使用：</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 應(yīng)用程序的數(shù)據(jù)。
AngularJS 控制器是常規(guī)的 JavaScript 對(duì)象阱州。
AngularJS 控制器
AngularJS 應(yīng)用程序被控制器控制挑秉。
ng-controller 指令定義了應(yīng)用程序控制器。
控制器是 JavaScript 對(duì)象苔货，由標(biāo)準(zhǔn)的 JavaScript 對(duì)象的構(gòu)造函數(shù) 創(chuàng)建犀概。
<small>AngularJS 實(shí)例</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>應(yīng)用解析：
AngularJS 應(yīng)用程序由 ng-app 定義。應(yīng)用程序在 <div> 內(nèi)運(yùn)行蒲赂。
ng-controller="myCtrl" ?屬性是一個(gè) AngularJS 指令阱冶。用于定義一個(gè)控制器。
myCtrl 函數(shù)是一個(gè) JavaScript 函數(shù)滥嘴。
AngularJS 使用$scope 對(duì)象來(lái)調(diào)用控制器木蹬。
在 AngularJS 中， $scope 是一個(gè)應(yīng)用對(duì)象(屬于應(yīng)用變量和函數(shù))若皱。
控制器的 $scope （相當(dāng)于作用域镊叁、控制范圍）用來(lái)保存AngularJS Model(模型)的對(duì)象。
控制器在作用域中創(chuàng)建了兩個(gè)屬性 (firstName 和 lastName)走触。
ng-model 指令綁定輸入域到控制器的屬性（firstName 和 lastName）晦譬。</small>
控制器方法
<small>上面的實(shí)例演示了一個(gè)帶有 lastName 和 firstName 這兩個(gè)屬性的控制器對(duì)象。
控制器也可以有方法（變量和函數(shù)）：</small>
AngularJS 實(shí)例
<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>在大型的應(yīng)用程序中互广，通常是把控制器存儲(chǔ)在外部文件中敛腌。
只需要把 <script> 標(biāo)簽中的代碼復(fù)制到名為 personController.js 的外部文件中即可：
AngularJS 實(shí)例</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>
其他實(shí)例
<small>以下實(shí)例創(chuàng)建一個(gè)新的控制器文件:
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
保存文件為 namesController.js:
然后，在應(yīng)用中使用控制器文件:
AngularJS 實(shí)例</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 過(guò)濾器
<small>過(guò)濾器可以使用一個(gè)管道字符（|）添加到表達(dá)式和指令中惫皱。</small>
AngularJS 過(guò)濾器
AngularJS 過(guò)濾器可用于轉(zhuǎn)換數(shù)據(jù)：
表達(dá)式中添加過(guò)濾器
<small>過(guò)濾器可以通過(guò)一個(gè)管道字符（|）和一個(gè)過(guò)濾器添加到表達(dá)式中像樊。.
(（下面的兩個(gè)實(shí)例，我們將使用前面章節(jié)中提到的 person 控制器）)
uppercase 過(guò)濾器將字符串格式化為大寫：
AngularJS 實(shí)例
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名為 {{ lastName | uppercase }}</p>
</div>
</small>
嘗試一下 ?
<small>lowercase 過(guò)濾器將字符串格式化為小寫：
AngularJS 實(shí)例</small>
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名為 {{ lastName | lowercase }}</p>
</div>
currency 過(guò)濾器
<small>currency 過(guò)濾器將數(shù)字格式化為貨幣格式：
AngularJS 實(shí)例</small>
<div ng-app="myApp" ng-controller="costCtrl">
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
<p>總價(jià) = {{ (quantity * price) | currency }}</p>
</div>
向指令添加過(guò)濾器
<small>過(guò)濾器可以通過(guò)一個(gè)管道字符（|）和一個(gè)過(guò)濾器添加到指令中旅敷。
orderBy 過(guò)濾器根據(jù)表達(dá)式排列數(shù)組：
AngularJS 實(shí)例</small>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
過(guò)濾輸入
<small>輸入過(guò)濾器可以通過(guò)一個(gè)管道字符（|）和一個(gè)過(guò)濾器添加到指令中生棍，該過(guò)濾器后跟一個(gè)冒號(hào)和一個(gè)模型名稱。
filter 過(guò)濾器從數(shù)組中選擇一個(gè)子集：
AngularJS 實(shí)例</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>
