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-pristineAngularJS 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>