一、验证

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

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

示例代码：

<!DOCTYPE html>

<!--指定angular管理的范围-->

<html ng-app="app01">

    <head>

        <meta charset="UTF-8">

        <title>验证</title>

    </head>

    <body>

        <!--指定控制器的作用范围-->

        <form ng-controller="Controller1" name="form1">

            <p>

                <label for="username">帐号：</label>

                <input type="text" id="username" name="username" ng-model="username" ng-required="true" />

                <span ng-show="form1.username.$error.required">必填</span>

            </p>

            <p>

                <label for="username">密码：</label>

                <input type="text" id="password" name="password" ng-model="password" ng-required="true" ng-pattern="/^[a-z]{6,8}$/" ng-trim="true"/>

                <span ng-show="form1.password.$error.required">必填</span>

                <span ng-show="form1.password.$error.pattern">只允许6-8位小写字母</span>

            </p>

            <p>

                密码的值：{{"["+password+"]"}}<br/>

                是否合法：form1.password.$valid={{form1.password.$valid}}<br/>

                是否非法：form1.password.$invalid={{form1.password.$invalid}}<br/>

                错误消息：form1.password.$error={{form1.password.$error}}<br/>

                是否修改：form1.password.$dirty={{form1.password.$dirty}}<br/>

                是否默认：form1.password.$pristine={{form1.password.$pristine}}<br/>

            </p>

            <p>

                表单信息：<br/>

                错误消息：form1.$error={{form1.$error}}<br/>

                是否合法：form1.$valid={{form1.$valid}}<br/>

                是否非法：form1.$invalid={{form1.$invalid}}<br/>

            </p>

            <p>

                <button ng-disabled="form1.$invalid">提交</button>

            </p>

        </form>

        <!--引入angularjs框架-->

        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            //定义模块，指定依赖项为空

            var app01 = angular.module("app01", []);

            //定义控制器，指定控制器的名称，$scope是全局对象

            app01.controller("Controller1", function($scope) {

            });

        </script>

    </body>

</html>

运行结果：

二、过滤器

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

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

2.1、内置过滤器

常见的内置过滤器有：

1)、currency(货币)

2)、number(数字)

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

4)、json(数据)格式化

5)、limitTo(截取)格式化，数量限制
{{"StringObject" | limitTo : 3}}

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

示例代码：

<!DOCTYPE html>

<!--指定angular管理的范围-->

<html ng-app="app01">

    <head>

        <meta charset="UTF-8">

        <title>过滤器</title>

    </head>

    <body>

        <!--指定控制器的作用范围-->

        <form ng-controller="Controller1" name="form1">

            <p>

                货币：{{money}} ，{{money|currency}} ，{{money|currency:"￥"}}

            </p>

            <p>

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

            </p>

            <p>

                大写：{{message|uppercase}}

            </p>

            <p>

                小写：{{message|lowercase}}

            </p>

            <p>

                json：{{user | json}}

            </p>

            <p>

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

            </p>

            <p>

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

            </p>

            <p>

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

            </p>

            <p>

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

            </p>

        </form>

        <!--引入angularjs框架-->

        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            //定义模块，指定依赖项为空

            var app01 = angular.module("app01", []);

            //定义控制器，指定控制器的名称，$scope是全局对象

            app01.controller("Controller1", function($scope) {

                $scope.money=1985.678;

                $scope.message="Hello AngularJS!"

                $scope.user={name:"rose",age:18};

                $scope.birthday=new Date();

                $scope.users=[{name:"rose",age:18},{name:"jack",age:19},{name:"tome",age:17}];

            });

        </script>

    </body>

</html>

运行结果：

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

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

示例代码：

<!DOCTYPE html>

<!--指定angular管理的范围-->

<html ng-app="app01">

    <head>

        <meta charset="UTF-8">

        <title>过滤器</title>

    </head>

    <body>

        <!--指定控制器的作用范围-->

        <form ng-controller="Controller1" name="form1">

            {{money}}

            <hr/>

            {{moneyString}}

        </form>

        <!--引入angularjs框架-->

        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            //定义模块，指定依赖项为空

            var app01 = angular.module("app01", []);

            //定义控制器，指定控制器的名称，$scope是全局对象

            app01.controller("Controller1", function($scope,$filter) {

                $scope.money=1985.897;

                //使用$filter服务查找currency函数，并调用

                $scope.moneyString=$filter("currency")($scope.money,'USD$');

            });

        </script>

    </body>

</html>

运行结果：

2.2、自定义过滤器

示例代码：

<!DOCTYPE html>

<!--指定angular管理的范围-->

<html ng-app="app01">

    <head>

        <meta charset="UTF-8">

        <title>过滤器</title>

    </head>

    <body>

        <!--指定控制器的作用范围-->

        <form ng-controller="Controller1" name="form1">

            <p>

            {{"Hello AngularJS and NodeJS" | cutString:15:'...'}}

            </p>

            <p>

                {{longString}}

            </p>

        </form>

        <!--引入angularjs框架-->

        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            //定义模块，指定依赖项为空

            var app01 = angular.module("app01", []);

            //向模块中添加过滤

            //用于裁剪字符，超过长度则截取，添加...

            app01.filter("cutString",function(){

                return function(srcString,length,addString){

                    if(srcString.length<length){

                        return srcString;

                    }

                    return srcString.substring(0,length)+addString;

                }

            });

            //定义控制器，指定控制器的名称，$scope是全局对象

            app01.controller("Controller1", function($scope,$filter) {

                $scope.longString=$filter("cutString")("Hello AngularJS and NodeJS",5,":):):)");

            });

        </script>

    </body>

</html>

运行结果：

练习1：

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

练习2：

请自定义一个过滤器实现敏感关键字过滤，在过滤器中可以准备一个敏感词数组，将敏感词替换成指定的符号，默认为*号。
{{"This is some bad,dark evil text" | censor:"bad,dark,evil":"happy"}}
显示结果：
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:// 等。

内部包含：

<ng-include src="" [onload=""] [autoscroll=""]></ng-include>
<ANY ng-include="" [onload=""] [autoscroll=""]></ANY>
<ANY class="ng-include: ; [onload: ;] [autoscroll: ;]"> </ANY>

外部包含：

3.1.4、不绑定（ngNonBindable）

ngNonBindable指令告诉Angular编译或绑定当前DOM元素的内容。这对于要求Angular忽略那些元素中包含Angular指令和绑定的情况下很有用。这种情况能让你的网站实时显示源码。

<div>Normal: {{1 + 2}}</div><div ng-non-bindable>Ignored: {{1 + 2}}</div>

3.2、扩展表单元素的指令

3.2.1、ng-options

该指令允许你基于一个迭代表达式添加选项

</select>

3.2.2、ng-class-even与ng-class-odd

AngularJS模板使你可以把该作用域内的数据直接绑定到所显示的HTML元素

ng-class-even与ng-class类似，ng-repeat中偶数时应用

ng-class-odd与ng-class类似，ng-repeat中奇数时应用

3.2.3、ng-bind-template

同时绑定多个表达式块

3.2.4、ng-init

初始化

3.2.5、ng-switch

根据作用域表达式动态切换把那个DOM元素包含在已经编译的模板中。

3.2.6、ng-value

绑定给定的表达式到input[select]或 input[radio]的值上

<input type="radio" ng-value="'值'" ng-model="radioValue" />{{radioValue}}

3.3、事件

ng-blur 失去焦点
ng-change 改变
ng-checked 被选择
ng-click 点击
ng-copy 复制
ng-cut 剪切
ng-dbclick 双击
ng-focus 获得焦点
ng-keydown 按下键
ng-keyup 按键弹起
ng-mousedown 鼠标按下
ng-mouseenter 鼠标进入
ng-mouseleave 鼠标离开
ng-mousemove 鼠标移动
ng-mouseup 鼠标按下后弹起
ng-paste 粘贴
ng-submit 提交
ng-swipe-left 左滑动
ng-swipe-right 右滑动

3.4、其它内置指令

angular中提供了很多的内置指令，还有如：ng-{app/bind/bind-html/bind-template/blur/change/checked/class/class-even/class-odd/click/cloak/controller/copy/csp/cut/dblclick/disabled/focus/hide/href/if/include/init/keydown/keypress/keyup/list/model/mousedown/mouseenter/mouseleave/mousemove/mouseover/mouseup/ng-non-bindable/open/options/paste/readonly/repeat-start/repeat-end/selected/show/src/srcset/style/submit/swipe-left/swipe-right/switch/switch-default/switch-when/view}

可以查看帮助文档获得详细帮助。

3.5、自定义指令

内置的指令就算再丰富也是有限的，对于特殊的需要可以选择自定义指令，自定义指令可以封装常用操作也便于分享与交流，自定义指令的语法格式如下：

module.directive('指令名称'，function(){
return {
template:插入指令元素的模板
restrict:允许指令应用的范围
replace:告诉编译器用指令模板取代定义该指令的元素
transclude:是否可以访问内部作用域以外的作用域
scope:指定内部作用域
link:链接函数
controller:定义控制器来管理指令作用域和视图
require:指定所需要的其它指令
};
});

restrict：限制指令行为，允许指令应用的范围，取值，可以组合，如AE。

@：使用@（@attribute）来进行单向文本（字符串）绑定
= ：使用=（=attribute）进行双向绑定变量
& ：使用&来调用父作用域中的函数

3.5.1、第一个自定义指令

分类: 前端

前端MVC学习总结——AngularJS验证、过滤器的更多相关文章

ASP.NET MVC学习之模型验证详解
ASP.NET MVC学习之模型验证篇 2014-05-28 11:36 by y-z-f, 6722 阅读, 13 评论, 收藏, 编辑一.学习前的一句话在这里要先感谢那些能够点开我随笔的博友们 ...
前端MVC学习总结（一）——MVC概要与angular概要、模板与数据绑定
一.前端MVC概要 1.1.库与框架的区别框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...
前端MVC学习笔记（一）——MVC概要与angular概要、模板与数据绑定
一.前端MVC概要 1.1.库与框架的区别框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...
ASP.NET MVC学习之模型验证篇
一.学习前的一句话在这里要先感谢那些能够点开我随笔的博友们.慢慢的已经在博客园中度过一年半了,伊始只是将博客园作为自己学习的记录本一样使用,也不敢将自己的随笔发表到博客园首页,生怕自己的技艺不高,反 ...
前端MVC学习总结（二）——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
前端MVC学习笔记（二）——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
前端MVC学习总结（四）——NodeJS+MongoDB+AngularJS+Bootstrap书店示例
这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店功能:完成前后端分离的图书管理功能 ...
前端MVC学习笔记（四）——NodeJS+MongoDB+AngularJS+Bootstrap书店示例
这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店功能:完成前后端分离的图书管理功能 ...
前端MVC学习总结（三）——AngularJS服务、路由、内置API、jQueryLite
一.服务 AngularJS功能最基本的组件之一是服务(Service).服务为你的应用提供基于任务的功能.服务可以被视为重复使用的执行一个或多个相关任务的代码块. AngularJS服务是单例对象, ...

随机推荐

Redis和Memcached整体
Redis和Memcached整体对比 Redis的作者Salvatore Sanfilippo曾经对这两种基于内存的数据存储系统进行过比较,总体来看还是比较客观的,现总结如下: 1)性能对比:由于R ...
什么是Servlet?
HTML只能用来保存静态内容,而通常情况下,静态页面很难满足实际应用的需要,鉴于此,动态页面被引入.所谓动态页面,指的是能够根据不同时间,不同用户而显示不同内容的页面,例如常见的论坛.留言板.电子商务 ...
Hibernate 表映射主键生成策略与复合主键
主要分析三点: 一.数据表和Java类的映射 : 二.单一主键映射和主键的生成策略 : 三.复合主键的表映射 : 一.数据表和Java类的映射 Hibernate封装了数据库DDL语句,只需要将数据 ...
PHP流程控制之特殊结构
在前两节介绍的循环结构中,都是通过循环语句本身提供的条件表达式来指定循环次数执行代码块直到停止循环.但如果想在循环体执行过程中中止循环,或是跳过一些循环继续执行其他代码块,我们就需要一些特殊的流程控制 ...
使用Enyim.Caching访问阿里云的OCS
阿里云的开放式分布式缓存(OCS)简化了缓存的运维管理,使用起来很方便,官方推荐的.NET访问客户端类库为 Enyim.Caching,下面对此做一个封装. 首先引用最新版本 Enyim.Cachin ...
Easticsearch通信方式_API
目录返回目录:http://www.cnblogs.com/hanyinglong/p/5464604.html 1.Elasticsearch概念 a. Elasticsearch是一个基于Luc ...
javascript的列表切换
演示地址:http://wjf444128852.github.io/demo/Carousel/index.html IE兼容性没处理,确切的说不太会,还望指点一二思路: 1.js获取要给定点击事 ...
mfc学习之路--如何删除通过控件新增的变量
刚刚学校mfc的人都会遇到这样一个问题(比如我),在照做书做一个mfc程序,给控件新增变量时变量类型错了,但是变量名对了,然后想要加个正确的时候提示"已经存在该对象",然后就傻了, ...
iOS tableView右滑显示选择
如何使用UITableViewRowAction实现右滑选择呢? 1.在iOS8以前,我们实现tableview中滑动显示删除,置顶,更多等等的按钮时,都需要自己去实现,在iOS8中系统已经写好了,只 ...
C#图片处理常见方法性能比较
C#图片处理常见方法性能比较来自:http://www.cnblogs.com/sndnnlfhvk/archive/2012/02/27/2370643.html 在.NET编程中,由于GDI ...

前端MVC学习总结——AngularJS验证、过滤器

前端MVC学习总结——AngularJS验证、过滤器

一、验证

二、过滤器

2.1、内置过滤器

2.1.1、在模板中使用过滤器

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

2.2、自定义过滤器

三、指令（directive）

3.1、支持AngularJS功能的指令

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

3.1.2、控制器（ng-Controller）

3.1.3、包含（ng-Include）

3.1.4、不绑定（ngNonBindable）

3.2、扩展表单元素的指令

3.2.1、ng-options

3.2.2、ng-class-even与ng-class-odd

3.2.3、ng-bind-template

3.2.4、ng-init

3.2.5、ng-switch

3.2.6、ng-value

3.3、事件

3.4、其它内置指令

3.5、自定义指令

前端MVC学习总结——AngularJS验证、过滤器的更多相关文章

随机推荐

热门专题