Angularjs基础(三)
AngularJS ng-model 指令
ng-model 指令用于綁定應用程序數據到HTML 控制器（input,select,textarea）的值
ng-model指令
ng-model指令可以將輸入域的值與AngularJS 創建的變量綁定。
實例：
<div ng-app="myApp" ng-controller="myCtrl">
名字：<input ng-model="name">
</div>
<script>
var app = angular.module('mgApp',[]);
app.controller('myCtrl',function($scope){
$scope.name = "John Doe";
})
</script>
雙向綁定
雙向綁定，在修改輸入域的值時，AngularJS屬性的值也將修改：
實例：
<div ng-app="myApp" ng-controller="myCtrl">
名字：<input ng-model="name">
<h1>你輸入了：{{name}}</h1>
</div>
驗證用戶輸入
實例：
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一個合法的郵箱地址</span>
</form>
以上實例中，提示信息會在ng-show 屬性返回true的情況下顯示
應用狀態
ng-model指令可以為應用數據提供狀態值（invalid,dirty,touched,error）
實例：
<from 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}}
</from>
CSS 類
ng-model指令基于他們的狀態為HTML 元素提供了CSS類：
實例;
<style>
input .ng-invalid{
background-color:lightblue;
}
</style>
<body>
<from ng-app="" name="myForm">
輸入你的名字：
<input name="myAddress" ng-model="text" required>
</from>
</body>
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對象當做一個參數傳遞：
實例： 控制器中的屬性對應了視圖上的屬性：
<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>
當在控制器中添加$scope對象時，視圖（HTML）可以獲取了這些屬性
視圖中，你不需要添加$scope前綴，只需要添加屬性名即可，如{{carname}}。
Scope概述
AngularJS應用組成如下：
View(視圖)，即HTML。
Model(模型)，當前視圖中可用的數據。
Controller(控制器)，即JavaScript 函數，可以添加或修改屬性。
scope 是模型。
scope是一個JavaScript對象，帶有屬性和方法，這些屬性和方法可以在視圖和控制器中使用。
實例： 如果你改變了視圖，模型和控制器也會相應更新。
<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是非常重要的。
實例：當我們使用ng-repeat 指令時，沒個重復項都訪問了當前的重復對象。
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in name"></li>
</ul>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.names = ["Emil","Tobias","Linus"]
});
</script>
每個<li>元素可以訪問當前的重復對象，這里對應用的是一個字符串，并使用變量x 表示。
根作用域
所有的應用都有一個$rootScope,它可以作用在ng-app 指令包含的所有HTML 元素中。
$rootScope可作用域整個應用中，是各個controller中scope的橋梁。用rootscope定義的值，可以在各個controller中使用。
實例：創建控制器時，將$rootScope作為參數傳遞，可在應用中使用：
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{lastname}} 家族成員：</h1>
<ul>
<li ng-repeat="x in name">{{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對象的構造函數 創建。
實例：
<div ng-app="myApp" ng-controller="myCtrl">
名：<input type="text" ng-model = "firstName"><br>
姓：<input type="text" ng-model = "lastName">
姓名：{{firstName "" lastName}}
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.firstName = "John";
$scope.lastName = "Doe";
})
</script>
應用解析：
AngularJS 應用程序由ng-app定義。應用程序在<div>內運行。
ng-controller = "myCtrl" 屬性是一個Angular 指令。用于定義一個控制器。
myCtrl 函數是一個JavaScript 函數。
AngularJS 使用$scope對象來調用控制器。
在AngularJS 使用$scope是一個應用像（屬于應用變量和函數）
控制器的$scope(相當于作用域，控制范圍)用來保存AngularJS Mode(模型)的對象。
控制器在作用域中創建兩個屬性（firstName 和lastName）。
ng-model 指令綁定輸入域到控制器的屬性（firstName 和lastName）。
控制器方法
上面的石磊演示了一個帶有lastName 和firstName 這兩個屬性的控制器對象。
控制器也可以有方法變量和函數
實例
<div ng-app="myApp" ng-controller="personCtrl">
名：<input type="text" ng-model="firstName">
姓：<input type="text" ng-model="lastName">
姓名：{{fullName()}}
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('personCtrl',function($scope){
$scope.firsName = "John";
$scope.lastName = "Doe";
$scope.fullName = function(){
return $scope.firstName "" $scope.lastName;
}
})
</script>
外部文件中的控制器
在大型的應用程序中，通常是把控制器存儲在外部文件中。
只需要把<script>標簽中的代碼復制到名為personController.js的外部文件中即可：
實例：
<div ng-app="myApp" ng-controller = "personCtrl">
First Name:<input type="text" ng-model = "firstName">
Last Name:<input type="text" ng-model="lastName">
Full Name:{{firstName " " lastName}}
</div>
<script src="personController.js"></script>
其他實例
實例：
angular.module('myApp',[]).controller('namesCtrl',function($scope){
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
<div ng-repeat="myApp" ng-controller="nameCtrl">
<ul>
<li ng-repeat="x in name">
{{x.name 'x' x.country]}}
</li>
</ul>
</div>
<script src="namesController.js"></script>
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的Angularjs基础(三)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Angularjs基础(十)
- 下一篇： NEC css规范