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

前端之家收集整理的这篇文章主要介绍了详解AngularJS验证、过滤器、指令前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、验证

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

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

示例代码

<Meta charset="UTF-8"> 验证

运行结果:

二、过滤器

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

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

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、在模板中使用过滤器

示例代码

<Meta charset="UTF-8"> 过滤器
货币:{{money}} ,{{money|currency}} ,{{money|currency:"¥"}}

数字:{{money|number:1}} ,{{money | number:1 | currency:"$" }}

大写:{{message|uppercase}}

小写:{{message|lowercase}}

json:{{user | json}}

截取:{{message|limitTo:5|uppercase}}

日期1:{{birthday|date:'yyyy年MM月dd日 HH:mm:ss'}}

日期2:{{birthday|date:'fullDate'}}

排序:{{users|orderBy:'age':true}}

运行结果:

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

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

示例代码

<Meta charset="UTF-8"> 过滤器
{{moneyString}}

运行结果:

2.2、自定义过滤器

示例代码

<Meta charset="UTF-8"> 过滤器
{{"Hello AngularJS and NodeJS" | cutString:15:'...'}}

{{longString}}

运行结果:

练习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

.cls1 { background: lightblue; height: 100px; line-height: 100px; text-align: center; }
版本所有 违者必究

d05.html

指令

运行结果:

内部包含:

先定义模板,指定id与类型,模板中可以是任意片段:

引用模板,模板中可以使用angular表达式,引用的方法与外部包含一样。

指令

在定义模块时指定要依赖的模块:

其它的步骤与使用普通事件一样了。

示例代码:

指令