AngularJS之模型(ng-model指令）

这一篇主要是讲一下ng-model这个指令：

        ng-model 指令用于绑定应用程序数据到 HTML 控制器(input,select, textarea)的值。（如果没有记错，ng-model只能用在input、select、textarea这几个html元素上，这些元素都是可以输入的。有待验证.....）

用法:

ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定（单向的数据绑定）。例子如下:

输入域的值与控制器中的属性值相绑定，这是单向的。就是说：输入框里面的值改变不会改变控制器中属性的值，所以说是单向的。（这句话被我下面那句话有点矛盾。。。）

下面来看下双向的数据绑定：

数据的双向绑定的实现

其实看了这个例子，发现自己上面的理解有点错误，其实ng-model指令的使用后，就实现了数据的双向绑定，只不过上面第一个例子只是展示了从控制器中拿值到页面，在页面的值改变（输入框）时，其实控制器中的属性值也是改变的，第二个例子就用表达式证明了确实改变了。所以我这么觉得，ng-model指令实现了数据的双向绑定的实质，但是要是想看的很明显，就需要借助表达式，看得更明显（输入框里面的值一开始是跟控制器里面的值绑定的，所以一开始加载页面，输入框中的值等于控制器中相对应的值，然后输入框中的值改变了，进而控制器中所对应的值也改变了，通过表达式，从控制器（域）拿数据，显示在页面，跟输入框中输入的数据是一致的：双向绑定）

---

    上一节也简单说了一下ng-model指令的作用：有.....

（1）为应用程序数据提供类型验证（number、email、required）。

（2）为应用程序数据提供状态（invalid、dirty、touched、error）。

（3）为 HTML 元素提供 CSS 类。

（4）绑定 HTML 元素到 HTML 表单。

下面来看（1）提供类型验证：以email为例：

提示信息会在 ng-show 属性返回 true 的情况下显示

应用状态：（2）为应用程序数据提供状态（invalid、dirty、touched、error）例子：

CSS类：（3）为 HTML 元素提供 CSS 类。例子：

ng-model 指令根据表单域的状态添加ng-invalid 

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

（1）、ng-empty

（2）、ng-not-empty

（3）、ng-touched

（4）、ng-untouched

（5）、ng-valid

（6）、ng-invalid

（7）、ng-dirty

（8）、ng-pending

（9）、ng-pristine