首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJanuary 04, 2017

一、验证

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

<input Type="text" ng-model="" [name=""] [required=""] [ng-required=""] [ng-minlength=""] [ng-maxlength=""][ng-pattern=""][ng-change=""] [ng-trim=""]>

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

表单与表单元素都需要通过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>

运行结果：

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

二、过滤器

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

{{ express | filter:parameter1:p2:p3… | … | …}}

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

2.1、内置过滤器

常见的内置过滤器有：

1)、currency(货币)

{{123.456 | currency:'￥'}}

2)、number(数字)

{{12.235| number:2}}

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

{{"Hello"| uppercase}}

4)、json(数据)格式化

{{userObject| json}}

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

{{"StringObject" | limitTo : 3}}

6)、date 日期格式化

{{name | date : 'yyyy-MM-dd hh:mm:ss'}}

'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(筛选&过滤)格式化

{{name | filter : 'l' | json}}

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>

运行结果：

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

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>

运行结果：

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

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>

运行结果：

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

练习1：

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

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

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

外部包含：

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

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

header.html

<header>
 <h2>欢迎光临天狗商城</h2>
</header>

footer.html

<style>
 .cls1 {
 background: lightblue;
 height: 100px;
 line-height: 100px;
 text-align: center;
 }
</style>
<footer class="cls1">
 <h3>版本所有 违者必究</h3>
</footer>

d05.html

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>指令</title>
 </head>
 <body>
 <!--指定控制器的作用范围-->
 <form ng-controller="Controller1" name="form1" ng-init="header='header.html'">
 <ng-include src="header"></ng-include>
 <ng-include src="'header.html'"></ng-include>
 <div ng-include="'footer.html'"></div>
 </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) {
 });
 function regTest()
 {
 var reg1=new RegExp("\d","igm");
 var reg2=/\d/igm;
 var str="This is some bad,dark evil text";
 str=str.replace(/bad|dark|evil/igm,"Happy");
 console.log(str);
 //取出Hello Hello
 var str="<input value='Hello'/><input value='World'/>";
 //将value中的内容前后增加一个*
 }
 regTest();
 </script>
 </body>
</html>

运行结果：

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

内部包含：

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

<script id="p1" type="text/ng-template">

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

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>指令</title>
 </head>
 <body>
 <!--指定控制器的作用范围-->
 <form ng-controller="Controller1" name="form1" ng-init="header='header.html'">
 <ng-include src="header"></ng-include>
 <ng-include src="'header.html'"></ng-include>
 <script id="template1" type="text/ng-template">
 您想购买的商品是:{{product}}
 </script>
 <ng-include src="'template1'" onLoad="product='SD卡'"></ng-include>
 <ng-include src="'template1'" onLoad="product='TF卡'"></ng-include>
 <div ng-include="'footer.html'"></div>
 </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) {
 });
 function regTest()
 {
 var reg1=new RegExp("\d","igm");
 var reg2=/\d/igm;
 var str="This is some bad,dark evil text";
 str=str.replace(/bad|dark|evil/igm,"Happy");
 console.log(str);
 //取出Hello Hello
 var str="<input value='Hello'/><input value='World'/>";
 //将value中的内容前后增加一个*
 }
 regTest();
 </script>
 </body>
</html>

运行结果：

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

上面的结果都是“TF卡”的原因是因为模板是先包含再解析的，后定义的变量覆盖前面定义的，并不是一边包含一边渲染的。

3.1.4、不绑定（ngNonBindable）

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

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

脚本：

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>指令</title>
 </head>
 <body>
 <!--指定控制器的作用范围-->
 <form ng-controller="Controller1" name="form1" ng-init="header='header.html'">
 <p>
 被解析的表达式：1+2={{1+2}}
 </p>
 <p ng-non-bindable="true">
 不解析的表达式：1+2={{1+2}}
 </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>

结果：

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

3.2、扩展表单元素的指令

3.2.1、ng-options

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

<select ng-model="color" ng-options="c.name for c in colors">
<option>--请选择--</option>
</select>

ng-model必须要指定，默认情况下被选择的值就是当前对象，没有value的项将被清除。

示例代码：

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>指令</title>
 </head>
 <body>
 <!--指定控制器的作用范围-->
 <form ng-controller="Controller1" name="form1">
 <h3>基础下拉列表：</h3>
 <p>
 <select ng-model="user1" ng-options="u.name for u in users">
  <option value="">--请选择--</option>
 </select>
 <span> {{user1}}</span>
 </p>
 <h3>带分组的下拉列表：</h3>
 <p>
 <select ng-model="user2" ng-options="u.name group by u.sex for u in users">
  <option value="">--请选择--</option>
 </select>
 <span> {{user2}}</span>
 </p>
 <h3>组合的下拉列表：</h3>
 <p>
 <select ng-model="user3" ng-options="(u.name+u.age+'岁') group by u.sex for u in users">
  <option value="">--请选择--</option>
 </select>
 <span> {{user3}}</span>
 </p>
 <h3>自定义ng-model的值：</h3>
 <p>
 <select ng-model="user4" ng-options="u.id as u.name group by u.sex for u in users">
  <option value="">--请选择--</option>
 </select>
 <span> {{user4}}</span>
 </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.users = [{
  id: 1,
  name: "tom",
  sex: "男",
  age: 19
 }, {
  id: 2,
  name: "rose",
  sex: "女",
  age: 18
 }, {
  id: 7,
  name: "jack",
  sex: "男",
  age: 16
 }, {
  id: 9,
  name: "lucy",
  sex: "女",
  age: 20
 }, {
  id: 15,
  name: "mark",
  sex: "男",
  age: 89
 }];
 });
 </script>
 </body>
</html>

运行结果：

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

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中奇数时应用

<p ng-repeat="a in animals" ng-class-odd="'odd'" ng-class-even="'even'">
 {{a.name}}
</p>

示例代码：

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>指令</title>
 <style>
 .bg1{
 background: lightcoral;
 color:white;
 }
 .bg2{
 background: lightpink;
 color: white;
 }
 </style>
 </head>
 <body>
 <!--指定控制器的作用范围-->
 <form ng-controller="Controller1" name="form1">
 <ul>
 <li ng-repeat="u in users" ng-class-even="'bg1'" ng-class-odd="'bg2'">
  {{u.name}}
 </li>
 </ul>
 </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.users = [{
  id: 1,
  name: "tom",
  sex: "男",
  age: 19
 }, {
  id: 2,
  name: "rose",
  sex: "女",
  age: 18
 }, {
  id: 7,
  name: "jack",
  sex: "男",
  age: 16
 }, {
  id: 9,
  name: "lucy",
  sex: "女",
  age: 20
 }, {
  id: 15,
  name: "mark",
  sex: "男",
  age: 89
 }];
 });
 </script>
 </body>
</html>

运行结果：

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

3.2.3、ng-bind-template

同时绑定多个表达式块

<p ng-bind-template="{{student1}} and {{student2}}"></p>

示例：

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>指令</title>
 </head>
 <body>
 <!--指定控制器的作用范围-->
 <form ng-controller="Controller1" name="form1">
 <div ng-bind="info1">{{info2}}</div>
 <div ng-bind-template="{{info1}} ? 答案是：{{info2}}"></div>
 </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.info1="1+1=";
 $scope.info2="2";
 });
 </script>
 </body>
</html>

结果：

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

3.2.4、ng-init

初始化

<p ng-init="test=1" ng-repeat="a in animals">
 {{a.name}} {{a.id+test}}
</p>

示例代码：

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>指令</title>
 </head>
 <body>
 <!--指定控制器的作用范围-->
 <form ng-controller="Controller1" name="form1">
 <ul ng-init="nums=[1,1,2,2,3,3,4,4,5,5]">
 <li ng-repeat="i in nums track by $index">
  {{i}}+1={{i+1}}
 </li>
 </ul>
 </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>

运行结果：

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

dupes错误说明：

AngularJS does not allow duplicates in a ng-repeat directive. This means if you are trying to do the following, you will get an error.

ng-repeat不允许重复。

<div ng-repeat="row in [1,1,1]">
<div ng-repeat="row in [1,1,1] track by $index">

ng-repeat还是需要一个唯一的key

3.2.5、ng-switch

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

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

示例代码：

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>指令</title>
 </head>
 <body>
 <!--指定控制器的作用范围-->
 <form ng-controller="Controller1" name="form1" ng-init="color='orangered'">
 请输入颜色：<input ng-model="color" />
 <p ng-switch="color" ng-style="{'color':color}">
 <span ng-switch-when="red">红色</span>
 <span ng-switch-when="green">绿色</span>
 <span ng-switch-when="blue">蓝色</span>
 <span ng-switch-default>输入错误，请输入red,green,blue</span>
 </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>

运行结果：

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

3.2.6、ng-value

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

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

示例代码：

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>指令</title>
 </head>
 <body>
 <!--指定控制器的作用范围-->
 <form ng-controller="Controller1" name="form1" ng-init="color='orangered'">
 <p>
 是否同意：
 <input type="radio" ng-value="'同意'" ng-model="isAllow" name="allow" />yes
 <input type="radio" ng-value="'不同意'" ng-model="isAllow" name="allow" />no
 <p>
  {{isAllow}}
 </p>
 </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>

示例结果：

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

只允许使用在radio与select上，checkbox无效。

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 右滑动

有些特殊的事件需要引入外部模块支持，如ng-swipe-left，首先添加引用：

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

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

//定义模块，指定依赖项为ngTouch
 var app01 = angular.module("app01", ['ngTouch']);

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

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

示例代码：

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>指令</title>
 <style type="text/css">
 .circle{
 width: 100px;
 height: 100px;
 background: lightgreen;
 border-radius: 50px;
 position: absolute;
 }
 </style>
 </head>
 <body>
 <!--指定控制器的作用范围-->
 <form ng-controller="Controller1" name="form1" ng-init="color='orangered'">
 <h3 ng-init="left=200">left:{{left}}</h3>
 <div ng-swipe-left="left=left-10" ng-swipe-right="left=left+10" class="circle" ng-style="{'left':left+'px'}"></div>
 </form>
 <!--引入angularjs框架-->
 <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/angular146/angular-touch.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 //定义模块，指定依赖项为ngTouch
 var app01 = angular.module("app01", ['ngTouch']);
 //定义控制器，指定控制器的名称，$scope是全局对象
 app01.controller("Controller1", function($scope) {});
 </script>
 </body>
</html>

运行结果：

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

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。

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

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

3.5.1、第一个自定义指令

示例代码：

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>指令</title>
 </head>
 <body>
 <!--指定控制器的作用范围-->
 <form ng-controller="Controller1">
 <div my-Timer></div>
 <br/>
 <my-Timer></my-Timer>
 </form>
 <!--引入angularjs框架-->
 <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 //定义模块，指定依赖项为ngTouch
 var app01 = angular.module("app01", []);
 //在模块app01上定义curentTime指令
 app01.directive("myTimer",function(){
 return {
  template:"<span>"+new Date().toLocaleString()+"</span>", //模板
  restrict:"AE", //可应用范围
  replace:true //是否替换
 };
 });
 //定义控制器，指定控制器的名称，$scope是全局对象
 app01.controller("Controller1", function($scope) {
 });
 </script>
 </body>
</html>

运行结果：

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

因为使用了replace属性，所以div标签被替换了，另外restrict指定为AE则标签可以作为元素与属性使用。

3.5.2、自定义时钟

上个自定义指定很简单，我将上一个指令修改为可以动态变化的时间及可以给时钟指定参数与事件。

示例代码：

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>指令</title>
 </head>
 <body>
 <!--指定控制器的作用范围-->
 <form ng-controller="Controller1">
 <my-Timer color="blue" passed="0" interval="1000"></my-Timer>
 </form>
 <!--引入angularjs框架-->
 <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 //定义模块，指定依赖项为ngTouch
 var app01 = angular.module("app01", []);
 //定义控制器，指定控制器的名称，$scope是全局对象
 app01.controller("Controller1", function($scope) {
 });
 //在模块app01上定义curentTime指令
 app01.directive("myTimer",function(){
 return {
  template:"<span style='color:{{color}}'></span>", //模板
  restrict:"AE", //可应用范围
  replace:true, //是否替换
  scope:{
  color:'@'
  },
  link:function(scope,elem,attr,controller){
  var i=attr.interval||1000;
  elem.text(new Date().toLocaleString()+" 已计时："+attr.passed+"秒"); //向元素中设置文本为当前时间
  //定时器，每隔指定的时间调用函数
  setInterval(function(){
  attr.passed=parseInt(attr.passed)+parseInt(i/1000);
  elem.text(new Date().toLocaleString()+" 已计时："+attr.passed+"秒"); //向元素中设置文本为当前时间
  },i);
  }
 };
 });
 </script>
 </body>
</html>

运行结果：

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

四、示例下载

 github仓库：https://github.com/zhangguo5/Angular02.git

以上所述是小编给大家介绍的AngularJS验证、过滤器、指令，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

张果

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
Jquery之美中不足小结
Feb 16 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
jquery实现弹出层效果实例
May 19 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
完美的js图片轮换效果
Feb 05 Javascript
详解Vue整合axios的实例代码
Jun 21 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
ES6函数和数组用法实例分析
May 23 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 Javascript
Vue实现下拉加载更多
May 09 Vue.js
Bootstrap3 图片（响应式图片&amp;图片形状）
Jan 04 #Javascript
javascript 注释代码的几种方法总结
Jan 04 #Javascript
JS数组返回去重后数据的方法解析
Jan 03 #Javascript
js实现复选框的全选和取消全选效果
Jan 03 #Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 #Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 #Javascript
原生JS实现在线问卷调查投票特效
Jan 03 #Javascript
Vscode(3) character(1) OVERLORD(1) mysql(6) 字符集(1) 时钟(1) SSH(3) 数据表(1) 算法(1) 2022年7月新番(1)
You might like
长波知识介绍
2021/03/01 无线电
最省空间的计数器
2006/10/09 PHP
php公用函数列表[正则]
2007/02/22 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
PHP中使用gettext解决国际化问题的例子（i18n）
2014/06/13 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
JavaScript延迟加载
2021/03/09 Javascript
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
Python开发编码规范
2006/09/08 Python
python计算对角线有理函数插值的方法
2015/05/07 Python
Python读写ini文件的方法
2015/05/28 Python
Python实现处理管道的方法
2015/06/04 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
Python matplotlib可视化实例解析
2020/06/01 Python
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
获取邓白氏信用报告：Dun & Bradstreet
2019/01/22 全球购物
农村婚礼证婚词
2014/01/10 职场文书
质量月活动策划方案
2014/03/10 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
《打电话》教学反思
2016/02/22 职场文书
介绍信应该怎么开？
2019/04/03 职场文书
Python采集股票数据并制作可视化柱状图
2022/04/04 Python