Superlin的读书笔记

过滤器

调用过滤器

12bet,过滤器用来格式化需要展示给用户的数据，在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器，12bet,在JavaScript代码中可以通过$filter来调用过滤器。

内置过滤器

AngularJS内置了如下过滤器：

1. currency: 将一个数值格式化为货币格式
2. date: 将日期格式化成需要的格式
3. filter: 12博体育,从给定数组中选择一个子集
4. json: 将一个JSON或JavaScript对象转换成字符串
5. limitTo: 根据传入的参数生成一个新的数组或字符串，12博体育,新的数组或字符串的长度取决于传入的参数，12bet,通过传入参数的正负值来控制从前面还是从后面开始截取
6. lowercase: 将字符串转为小写
7. uppercase: 将字符串转为大写
8. number: 将数字格式化成文本
9. orderBy: 12bet,用表达式对指定的数组进行排序

自定义过滤器

可以这样自定义一个过滤器：

angular.module('myApp.filters', [])
    .filter('capitalize', function() {
        return function(input) {};
    });

表单验证

AngularJS提供了一些表单验证指令：

1. 必填项：required
2. 最小长度：ng-minlength
3. 最大长度：ng-maxlength
4. 模式匹配：ng-pattern
5. 电子邮件：input类型为email即可
6. 数字：input类型为number
7. URL：input类型为url

通过formName.inputFieldName.property能够访问表单字段的属性，包括

* 未修改的表单：`$pristine`
* 修改过的表单：`$dirty`
* 合法的表单：`$valid`
* 不合法的表单：`$invalid`
* 错误：`$error`，包含当前表单的所有验证内容，以及它们是否合法的信息

AngularJS会根据表单的状态来添加一些CSS类，有

* `.ng-pristine {}`
* `.ng-dirty {}`
* `.ng-valid {}`
* `.ng-invalid {}`

ngModelController中的$setViewValue()方法被调用时，$parsers数组中的函数会逐个调用，这些函数可以对值进行转换，或通过$setValidity()来设置表单的合法性

当绑定的ngModel值发生了变化，并经过$parsers数组中解析器的处理后，这个值会被传递 给$formatters流水线。$formatters中的函 数也可以修改并格式化这些值。

在指令的链接阶段，也就是link函数中向ngModel的$formatters和$parsers中加入处理函数

不要忘记给输入字段添加name属性。给输入字段添加name属性非常重要：这决定了我们将验证信息展示给用户时如何引用表单输入字段。

当用户视图提交表单，可以在作用域捕获到一个submitted值，然后对表单内容进行验证并显示错误信息

通过ng-message可以很方便的为验证创建自定义消息