angular自学篇之ng-model

ng-model指令的五大作用

1.ng-model指令可以将输入框的值与angular创建的变量所绑定（即使用ng-model指令来将输入框的值绑定到控制器属性上）

eg:<input ng-model="name">

app.controller（"myCtrl",function ($scope) {

$scope.name="zhang san"

}）

2.双向绑定

3.验证用户的输入

<!-- 在表单元素中通过name来定位唯一的元素 -->

<form ng-app="" name="myForm">

Email:

<input type="email" name="Address" ng-model="text">

<!-- 通过ng-show来展示提示信息，提示信息会在ng-show返回true的情况下显示 -->

<span ng-show="myForm.Address.$error.email">不合法邮箱</span>

</form>

4.应用状态

<form ng-app="" ng-init="egEmail='m13088954218@163.com'" name="myForm">

<p>

<!-- required属性为input的属性，属于html5中的内容。ng-show当为true的时候会显示对应标签中的内容。 -->

请输入您的Email:<input type="email" name="userEmail" ng-model="text" required><span ng-show="myForm.userEmail.$valid">输入合法</span>

</p>

<h1>通过ng-model来改变应用程序的状态</h1>

<p>valid:{{myForm.userEmail.$valid}}(valid合法的，当输入的为合法的时候则为true)</p>

<p>dirty:{{myForm.userEmail.$dirty}}(dirty污染的,当输入框的值改变的时候则为true)</p>

<p>touched:{{myForm.userEmail.$touched}}(touched触摸的,通过触屏点击则为true)</p>

</form>

5.css类

ng-model指令基于它们的状态为html元素提供css类

ng-model指令根据表单域的状态来添加/移除以下类:

ng-valid布尔值属性，它指是表单验证是否通过，如果表单验证通过，则为true.

ng-invalid表单验证不通过。

ng-dirty布尔值属性，它指是用户是否修改了表单，如果为true，则为修改过。如果为false，则为未修改。

ng-touched控件失去焦点

ng-untouched控件没有失去焦点

ng-pristine(pristine原始状态)布尔值属性表示用户是否修改了表单，如果为true则表示没有被修改过，false表示修改过。
ng-pending任何为满足$asyncValidators的情况