这一篇主要是讲一下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
网友评论