详解AngularJS验证、过滤器、指令

一、验证

angularJS中提供了许多的验证指令，可以轻松的实现验证，只需要在表单元素上添加相应的ng属性，常见的如下所示：

表单与表单元素都需要通过name引用，请注意设置name的值。获得错误的详细参数可以在示例中看到。

示例代码：

运行结果：

二、过滤器

使用过滤器格式化数据，变换数据格式，在模板中使用一个插值变量。语法格式如下：

过滤器分了内置过滤器与自定义过滤器，过滤器的调用方式也分了在模板中调用与在函数中调用。

2.1、内置过滤器

常见的内置过滤器有：

1)、currency(货币)

2)、number(数字)

3)、uppercase,lowercase(大小写)格式化

4)、json(数据)格式化

5)、limitTo(截取)格式化，数量限制

6)、date 日期格式化

'yyyy': 4位数字的年份(如AD 1 => 0001,AD 2010 => 2010) 'yy': 2位数字的年份，范围为(00-99)。(如AD 2001 => 01,AD 2010 => 10) 'y': 1位数字的年份，例如 (AD 1 => 1,AD 199 => 199) 'MMMM': 月份 (January-December) 'MMM': 月份 (Jan-Dec) 'MM': 月份,padded (01-12) 'M': 月份 (1-12) 'dd': 日，范围为(01-31) 'd': 日 (1-31) 'EEEE': 星期,(Sunday-Saturday) 'EEE': 星期,(Sun-Sat) 'HH': 小时,范围为(00-23) 'H': 小时 (0-23) 'hh': am/pm形式的小时,范围为(01-12) 'h': am/pm形式的小时,(1-12) 'mm': 分钟,范围为 (00-59) 'm': 分钟 (0-59) 'ss': 秒,范围为 (00-59) 's': 秒 (0-59) '.sss' or ',sss': 毫秒,范围为 (000-999) 'a': am/pm 标记 'Z': 4 位数字的时区偏移(+符号)(-1200-+1200) 'ww': ISO-8601 年内的周数 (00-53) 'w': ISO-8601 年内的周数 (0-53)

format 字符串也可以是以下预定义的本地化格式之一: 'medium': 等于en_US本地化后的 'MMM d,y h:mm:ss a' (如：Sep 3,2010 12:05:08 pm) 'short': 等于en_US本地化后的 'M/d/yy h:mm a' (如： 9/3/10 12:05 pm) 'fullDate': 等于en_US本地化后的 'EEEE,MMMM d,y' (如： Friday,September 3,2010) 'longDate': 等于en_US本地化后的 'MMMM d,y' (如： September 3,2010) 'mediumDate': 等于en_US本地化后的 'MMM d,y' (如： Sep 3,2010) 'shortDate': 等于en_US本地化后的 'M/d/yy' (如： 9/3/10) 'mediumTime': 等于en_US本地化后的 'h:mm:ss a' (如： 12:05:08 pm) 'shortTime': 等于en_US本地化后的 'h:mm a' (如： 12:05 pm) format 字符串可以包含固定值。这需要用单引号括起来 (如： "h 'in the morning'")。如果要输出单引号，使序列中使用两个单引号(如： "h 'o''clock'")。

7)、orderBy(排序)格式化

orderBy:'age':reverse reverse是true表示降序、false表示升序

8)、filter(筛选&过滤)格式化

2.1.1、在模板中使用过滤器

示例代码：

运行结果：

2.1.2、在脚本中调用过滤函数

在函数中调用过滤器的方法是：在控制中添加对的依赖，filter的依赖，filter("过滤函数名称")(被过滤对象,'参数')

示例代码：

运行结果：

2.2、自定义过滤器

示例代码：

运行结果：

练习1：

点击价格与名称可以进行排序，排序时显示向上或向下的箭头，在搜索框中可以输入查询条件过滤数据。验证搜索框中的内容只能是字母与数字，不允许输入其它类型的字符。

练习2：

请自定义一个过滤器实现敏感关键字过滤，在过滤器中可以准备一个敏感词数组，将敏感词替换成指定的符号，默认为*号。

显示结果：

This is some happy,happy happy text

三、指令（directive）

指令(directive)是AngularJS模板标记和用于支持的JavaScript代码的组合。AngularJS指令标记可以是HTML属性、元素名称或者CSS类，指令扩展了HTML的行为。指令可以分为：

a)、内置指令：支持AngularJS功能的指令、扩展表单元素的指令、把作用域绑定到页面元素的指令

b)、自定义指令，增加与扩展出新的指令。

ng-app这样的标记我们称之为指令。模板通过指令指示AngularJS进行必要的操作。 比如：ng-app指令用来通知AngularJS自动引导应用；ez-clock 指令用来通知AngularJS生成指定的时钟组件。

3.1、支持AngularJS功能的指令

3.1.1、应用与模块（ng-app）

自动载入启动一个AngularJS应用，声明了ng-app的元素会成为$rootScope的起点 每个HTML文档只有一个AngularJS应用能被自动载入启动,文档中找到的第一个ngApp将被用于定义自动载入启动的应用的根元素。要在一个HTML文档中运行多个应用，你必须使用angular.bootstrap来手工启动。AngularJS应用间不能嵌套。

3.1.2、控制器（ng-Controller）

ngController指令给视图添加一个控制器，控制器之间可以嵌套，内层控制器可以使用外层控制器的对象，但反过来不行。这是angular支持基于“视图-模型-控制器”设计模式原则的主要方面。

Angular中的MVC组件有：

模型 — 模型是一个域的属性集合；域被附加到DOM上，通过绑定来存取域属性。 视图 — 模板(进行数据绑定的HTML)会被呈现到视图中。 控制器 — ngController指令声明一个控制器类；该类包含了业务逻辑，在应用后台使用函数和值来操控域中的属性。 注意，你也能使用$route服务定义一个路由来将控制器附加到DOM上。一个常见错误是在模板上再次使用ng-controller定义一个控制器。这将引起控制器被附加和执行两次。

3.1.3、包含（ng-Include）

获取、编译并引用一个外部HTML片段(也可以是内部的)

默认情况下，模板URL被强制为使用与应用文档相同的域名和协议。这是通过调用$sce.getTrustedResourceUrl 实现的。为了从其它的域名和协议载入模板，你可以采用 白名单化 或 包裹化 任一手段来作为可信任值。参考 Angular的 强上下文转义。 此外，浏览器的 同源策略 和 交叉源资源共享(CORS) 策略会进一步限制模板是否能成功载入。例如，ngInclude 在所有浏览器上不能进行交叉域请求，一些浏览不能访问 file:// 等。

外部包含：

外部包含是指包含一个独立的外部文件。

包含时请注意中间页面地址要加引号，需要的是一个字符，如果不加会认为是一个变量。

header.html

footer.html

d05.html