ng-model 指令根据表单域的状态添加/移除以下类：
ng-valid: 验证通过
ng-invalid: 验证失败
ng-valid-[key]: 由$setValidity添加的所有验证通过的值
ng-invalid-[key]: 由$setValidity添加的所有验证失败的值
ng-pristine: 控件为初始状态
ng-dirty: 控件输入值已变更
ng-touched: 控件已失去焦点
ng-untouched: 控件未失去焦点
ng-pending: 任何为满足$asyncValidators的情况
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上
当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:
当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。
视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。
AngularJS 应用组成如下：
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
scope 是模型。
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。
视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。
如果你修改了视图，模型和控制器也会相应更新：
当我们使用 ng-repeat 指令时，每个重复项都访问了当前的重复对象:
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
指令根据表单域的状态添加/移除以下类：
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
输入你的名字:
<input name="myAddress" ng-model="text" required>
</form>
文本域添加了 required 属性，该值是必须的，如果为空则是不合法的。
修改了视图，模型和控制器也会相应更新：
<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>
ng-repeat,$rootScope的使用：
<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>
（一）控制器
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。
AngularJS 应用程序由 ng-app 定义。应用程序在<div> 内运行。
ng-controller="myCtrl" 属性是一个AngularJS 指令。用于定义一个控制器。
myCtrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。
控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (firstName 和 lastName)。
ng-model 指令绑定输入域到控制器的属性（firstName和 lastName）。
重点
控制器也可以有方法（变量和函数）：
<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> 标签中的代码复制到名为 personController.js 的外部文件中即可：
二（过滤器）
过滤器可以使用一个管道字符（|）添加到表达式和指令中。
AngularJS 过滤器可用于转换数据：
过滤器 |
描述 |
currency |
格式化数字为货币格式。 |
filter |
从数组项中选择一个子集。 |
格式化字符串为小写。 |
|
orderBy |
根据某个表达式排列数组。 |
uppercase |
格式化字符串为大写。 |
过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。.
<divng-app="myApp"ng-controller="personCtrl">
<!--<p>姓名为{{firstName|uppercase }}</p>
<p>姓名为{{firstName|lowercase }}</p>-->
<inputtype="number"ng-model="quantity">
<inputtype="number"ng-model="price">
<p>总价 = {{ (quantity*price)|currency }}</p>
<p>循环对象:</p>
<inputtype="number"ng-model="test">
<ul>
<ling-repeat="xinnames|filter:test|orderBy:'country'">
{{ (x.name|uppercase)+','+(x.country|lowercase) }}
</li>
</ul>
自定义: {{ msg|reverse }}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function ($scope) {
$scope.names = [
{ name: 'Janitest', country: 'Norway' },
{ name: 'Hege', country: 'Sweden' },
{ name: 'Kai', country: 'Denmark' }
];
$scope.msg = "Runoob"
});
app.filter('reverse', function () { //可以注入依赖
returnfunction (text) {
return text.split("").reverse().join("");
}
});
</script>