Angularjs系列之作用域（scope）

Angularjs 前端之家
前端之家收集整理的这篇文章主要介绍了Angularjs系列之作用域（scope），前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_502_0@2.3.作用域(Scope)

此章节重点说明Angular.js内置的已经注入到默认的作用域控制器、指令、服务。后续章节讨论用户定如何自定义指令、服务等。

2.3.1.概念

作用域（scope）是构成AngularJS应用的核心基础，在整个框架中都被广泛使用，应用的作用域是和应用的数据模型相关联的，同时作用域也是表达式执行的上下文。 $scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。Angular.js作用域与JavaScript作用域不同，名称以$开头的方法表示与作用域有关。

作用域是视图和控制器之间的胶水。在应用将视图渲染并呈献给用户之前，视图中的模板会和作用域进行连接，然后应用会对DOM进行设置以便将属性变化通知给AngularJS。作用域是应用状态的基础。基于动态绑定，我们可以依赖视图在修改数据时立刻更新 $scope，也可以依赖$scope在其发生变化时立刻重新渲染视图。

AngularJS将$scope设计成和DOM类似的结构，因此$scope可以进行嵌套，也就是说我们可以引用父级$scope中的属性。作用域提供了监视数据模型变化的能力。它允许开发者使用其中的 apply 机制，将数据模型的变化在整个应用范围内进行通知。我们在作用域的上下文中定义和执行表达式，同时它也是将事件通知给另一个控制器和应用其他部分的中介。

2.3.2.视图(View)与$scope

$rootScope 是AngularJS中最接近全局作用域的对象。不要在$rootScope上附加业务逻，否则与JavaScript的全局变量是一样的问题。$scope对象就是一个普通的JavaScript对象，我们可以在其上随意修改或添加属性。

$scope对象在AngularJS中充当数据模型，但与传统的数据模型不一样，$scope并不负责处理和操作数据，它只是视图和HTML之间的桥梁，它是视图和控制器之间的胶水。$scope的所有属性，都可以自动被视图访问到。

我们可以在AngularJS应用的模板中使用多种标记，包括下面这些。指令：将DOM元素增强为可复用的DOM组件的属性或元素。值绑定：模板语法{{ }}可以将表达式绑定到视图上。过滤器：可以在视图中使用的函数，用来进行格式化。表单控件：用来检验用户输入的控件。

2.3.3.作用域的好处

提供观察者以监视数据模型的变化；可以将数据模型的变化通知给整个应用，甚至是系统外的组件；可以进行嵌套，隔离业务功能和数据；给表达式提供运算时所需的执行环境。作用域包含了渲染视图时所需的功能和数据，它是所有视图的唯一源头。可以将作用域理解成视图模型（view model）。

2.3.4.$scope的生命周期

用户在通过 ng-model 属性监控的输入字段中输入，或者带有ng-click属性的按钮被点击时，ngular的事件循环都会启动。这个事件将在Angular执行上下文中处理。每当事件被处理时， $scope 就会对定义的表达式求值。此时事件循环会启动，并且Angular应用会监控应用程序内的所有对象，脏值检测循环也会运行。

生命周期包括基本的四个阶段：创建、链接、更新、销毁。

创建阶段：在创建控制器或指令时，AngularJS会用 $injector 创建一个新的作用域，并在这个新建的控制器或指令运行时将作用域传递进去。

链接阶段：当Angular开始运行时，所有的 $scope对象都会附加或者链接到视图中。所有创建$scope对象的函数也会将自身附加到视图中。这些作用域将会注册当Angular应用上下文中发生变化时需要运行的函数。这些函数被称为$watch函数，Angular通过这些函数获知何时启动事件循环。

更新阶段：当事件循环运行时，它通常执行在顶层 $scope对象上（被称作$rootScope），每个子作用域都执行自己的脏值检测。每个监控函数都会检查变化。如果检测到任意变化，$scope对象就会触发指定的回调函数。

销毁阶段：当一个$scope在视图中不再需要时，这个作用域将会清理和销毁自己。$scope上有个叫做 $destory() 的方法来清理这个作用域。

2.3.5.指令和作用域

指令在AngularJS中被广泛使用，指令通常不会创建自己的 $scope，ng-controller和ng-repeat 指令会创建自己的子作用域并将它们附加到DOM元素上。

2.3.6.表达式(Expression)

用{{ }}符号将一个变量绑定到 $scope上的写法本质上就是一个表达式：{{ expression }}。当用 $watch 进行监听时，AngularJS会对表达式或函数进行运算。

表达式和eval(javascript)非常相似，但有明显的不同。所有的表达式都在其所属的作用域内部执行，并有访问本地$scope的权限；如果表达式发生了TypeError和ReferenceError并不会抛出异常；不允许使用任何流程控制功能（条件控制，例如 if/else）；可以接受过滤器和过滤器链。

尽管AngularJS会在运行$digest循环的过程中自动解析表达式，但有时手动解析表达式也是非常有用的。示例工程：T61。

HTML代码：

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4.     <Meta charset="UTF-8">
  5.     <title>T61</title>
  6.     <script type="text/javascript" src="vendor/angular.js"></script>
  7.     <script type="text/javascript" src="index.js"></script>
  8. </head>
  9. <body ng-controller="IndexController">
  10. <p>
  11.     <span>最简单的表达式：</span>
  12.     <span>{{3*4*5*6}}</span>
  13. </p>
  14. <p>
  15.     <ul>
  16.     <li>
  17.         <span>监视Model的变化：</span>
  18.         <input ng-model="user.displayName" type="text" placeholder="请输入数字">
  19.     </li>
  20.     <li style="{{user.tipStyleString}}">
  21.         <span>用户当前输入了：</span>
  22.         <span>{{user.originalInput}}</span>
  23.     </li>
  24.     <li>
  25.         <span>处理后的用户输入：</span>
  26.         <span>{{user.disposalInput}}</span>
  27.     </li>
  28. </ul>
  29. </p>
  30. </body>
  31. </html>

controller代码：

  1. var module = angular.module("myApp",[]);
  2. module.controller("IndexController",function ($scope,$parse) {
  3.     $scope.user = {
  4.         displayName: "",tipStyleString: "background-color: #FFF",originalInput: "",disposalInput: ""
  5.     };
  6.     module.parseValue=$parse;
  7.     $scope.$watch("user.displayName",watchDisplayName);
  8. });
  9.  
  10. function watchDisplayName(newVal,oldVal,scope) {
  11.     if (newVal === oldVal) {
  12.         return;
  13.     }
  14.     scope.user.originalInput = newVal;
  15.     if (isExistsAlphabet(newVal)) {
  16.         newVal=clearAlphabet(newVal);
  17.         scope.user.tipStyleString = "background-color: #F00";
  18.     } else {
  19.         scope.user.tipStyleString = "background-color: #FFF";
  20.     }
  21.     var parseFunc = module.parseValue(newVal);
  22.     scope.user.disposalInput = parseFunc(scope);
  23. }
  24.  
  25. function isExistsAlphabet(str) {
  26.     if (typeof str != "string") {
  27.         return false;
  28.     }
  29.     for (let i = 0; i < str.length; i++) {
  30.         if (str[i] <= '9' && str[i] >= '0') {
  31.             continue;
  32.         }
  33.         return true;
  34.     }
  35.     return false;
  36. }
  37.  
  38. function clearAlphabet(str) {
  39.     if (typeof str != "string") {
  40.         return "";
  41.     }
  42.     var newVal="";
  43.     for (let i = 0; i < str.length; i++) {
  44.         if (str[i] <= '9' && str[i] >= '0') {
  45.             newVal+=str[i];
  46.         }
  47.     }
  48.     return newVal;
  49. }

2.3.7.控制器嵌套（作用域包含作用域）

控制器在AngularJS中的作用是增强视图。AngularJS中的控制器是一个函数，用来向视图的作用域中添加额外的功能。我们用它来给作用域对象设置初始状态，并添加自定义行为。当我们在页面上创建一个新的控制器时，AngularJS会生成并传递一个新的$scope给这个控制器。

ng-click指令将浏览器中的 mouseup事件，同设置在DOM元素上的事件处理程序绑定在一起。AngularJS同其他JavaScript框架最主要的一个区别就是，控制器并不适合用来执行DOM操作、格式化或数据操作，以及除存储数据模型之外的状态维护操作。它只是视图和$scope之间的桥梁。

AngularJS应用的任何一个部分，无论它渲染在哪个上下文中，都有父级作用域存在。对于ng-app 所处的层级来讲，它的父级作用域就是 $rootScope。除了孤立作用域外，所有的作用域都通过原型继承而来。

AngularJS在当前作用域中无法找到某个属性时，便会在父级作用域中进行查找。如果AngularJS找不到对应的属性，会顺着父级作用域一直向上寻找，直到抵达 $rootScope为止。如果在 $rootScope 中也找不到，程序会继续运行，但视图无法更新。示例工程：T5。

HTML代码：

  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head lang="en">
  4.     <Meta charset="UTF-8">
  5.     <title>T5</title>
  6.     <script type="text/javascript" src="vendor/angular.js"></script>
  7.     <script type="text/javascript" src="index.js"></script>
  8. </head>
  9. <body>
  10. <div ng-controller="ParentController">
  11.     <div ng-controller="ChildController">
  12.         <p>{{selfText}}</p>
  13.         <p>{{printSelf()}}</p>
  14.     </div>
  15.     <p style="color:red">{{status}}</p>
  16. </div>
  17. </body>
  18. </html>

JS代码：

  1. var module=angular.module("myApp",[]);
  2. module.controller("ParentController",function($scope,$timeout){
  3.     $scope.person={
  4.         name:"李婷",age:22
  5.     };
  6. });
  7.  
  8. module.controller("ChildController",function($scope){
  9.     $scope.printSelf=function(){
  10.         $scope.selfText="我叫"+$scope.person.name+"，我今年"+$scope.person.age+"岁了。";
  11.         setTimeout(()=>{
  12.             $scope.$parent.$apply(()=>{$scope.$parent.status="OK";});
  13.         },5000);
  14.         return "调用父作用域的person对象操作成功结束。";
  15.     }
  16. });

2.3.8.过滤器

过滤器用来格式化需要展示给用户的数据。AngularJS有很多实用的内置过滤器，同时也提供了方便的途径可以自己创建过滤器。模板绑定符号{{ }}内通过 | 符号来调用过滤器。可以用 | 符号作为分割符来同时使用多个过滤器。如果需要传递参数给过滤器，只要在过滤器名字后面加冒号即可。如果有多个参数，可以在每个参数后面都加入冒号。

Angular.js内置一个名称为filter的过滤器，它可以从给定数组中选择一个子集，并将其生成一个新数组返回。这个过滤器通常用来过滤需要进行展示的元素。例如，在做客户端搜索时，可以从一个数组中立刻过滤出所需的结果。filter选择器第二个参数是可选参数，bool类型或者返回bool类型的方法。

当参数是字符串时返回所有包含这个字符串的元素。如果我们想返回不包含该字符串的元素，在参数前加!符号。当参数是对象时AngularJS会将待过滤对象的属性同这个对象中的同名属性进行比较，如果属性值是字符串就会判断是否包含该字符串。如果我们希望对全部属性都进行对比，可以将$当作键名。当参数是函数时对每个元素都执行这个函数，返回非假值的元素会出现在新的数组中并返回。

Angular.js内置一个名称为orderBy的过滤器。它可以用表达式对指定的数组进行排序，接受两个参数，第一个是必需的，第二个是可选的。第一个参数是用来确定数组排序方向的谓词，可以是函数、字符串、数组。当第一个参数是函数时，该函数会被当作待排序对象的getter方法。当第一个参数是字符串时，字符串对这个字符串进行解析的结果将决定数组元素的排序方向。我们可以传入 + 或 - 来强制进行升序或降序排列。当第一个参数是数组时，在排序表达式中使用数组元素作为谓词。对于与表达式结果并不严格相等的每个元素，则使用第一个谓词。第二个参数用来控制排序的方向（是否逆向）。

示例工程：T7。

HTML代码：

  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head lang="en">
  4.     <Meta charset="UTF-8">
  5.     <title>T7</title>
  6.     <script type="text/javascript" src="../vendor/angular.js"></script>
  7.     <script type="text/javascript" src="../controllers/hello.js"></script>
  8.     <style>
  9.         td{
  10.             align-content: center;
  11.         }
  12.     </style>
  13. </head>
  14. <body ng-controller="HelloController">
  15. <h1 width="100%" align="center">Angular.js内置过滤器完整示例</h1>
  16. <table border="1px" cellspacing="0" cellpadding="5" rules="all" style="border: solid 1px #0000FF" width="100%">
  17.     <tr>
  18.         <th width="40%">过滤器</th>
  19.         <th width="60%">值</th>
  20.     </tr>
  21.     <tr>
  22.         <td align="right">字符串小写：</td>
  23.         <td>{{"Hello World 1!"|lowercase}}</td>
  24.     </tr>
  25.     <tr>
  26.         <td align="right">JS代码如何用过滤器：</td>
  27.         <td>{{hello2}}</td>
  28.     </tr>
  29.     <tr>
  30.         <td align="right">小数位数以及四舍五入：</td>
  31.         <td>{{hello3|number:3}}</td>
  32.     </tr>
  33.     <tr>
  34.         <td align="right">字符串大写：</td>
  35.         <td>{{"Hello World 4!"|uppercase}}</td>
  36.     </tr>
  37.     <tr>
  38.         <td align="right">货币：</td>
  39.         <td>{{hello5|currency}}</td>
  40.     </tr>
  41.     <tr>
  42.         <td align="right">各种日期格式：</td>
  43.         <td>
  44.             <ul>
  45.                 <li>
  46.                     <p>
  47.                         总体格式（西方格式）
  48.                     </p>
  49.                     <ol>
  50.                         <li>标准格式：{{ hello6 | date:'medium' }}</li>
  51.                         <li>短格式：{{ hello6 | date:'short' }}</li>
  52.                         <li>长格式：{{ hello6 | date:'fullDate' }}</li>
  53.                         <li>长日期格式：{{ hello6 | date:'longDate' }}</li>
  54.                         <li>标准日期格式：{{ hello6 | date:'mediumDate' }}</li>
  55.                         <li>短日期格式：{{ hello6 | date:'shortDate' }}</li>
  56.                         <li>标准时间格式：{{ hello6 | date:'mediumTime' }}</li>
  57.                         <li>短时间格式：{{ hello6 | date:'shortTime' }}</li>
  58.                     </ol>
  59.                 </li>
  60.                 <li>
  61.                     <p>
  62.                         年份格式化
  63.                     </p>
  64.                     <ol>
  65.                         <li>
  66.                             四位年份：{{ hello6 | date:'yyyy' }} <!-- 2013 -->
  67.                         </li>
  68.                         <li>
  69.                             两位年份：{{ hello6 | date:'yy' }} <!-- 13 -->
  70.                         </li>
  71.                         <li>
  72.                             一位年份：{{ hello6 | date:'y' }} <!-- 2013 -->
  73.                         </li>
  74.                     </ol>
  75.                 </li>
  76.                 <li>
  77.                     <p>
  78.                         月份格式化
  79.                     </p>
  80.                     <ol>
  81.                         <li>
  82.                             英文月份：{{ hello6 | date:'MMMM' }} <!-- August -->
  83.                         </li>
  84.                         <li>
  85.                             英文月份简写：{{ hello6 | date:'MMM' }} <!-- Aug -->
  86.                         </li>
  87.                         <li>
  88.                             数字月份：{{ hello6 |date:'MM' }} <!-- 08 -->
  89.                         </li>
  90.                         <li>
  91.                             一年中的第几个月份：{{ hello6 |date:'M' }} <!-- 8 -->
  92.                         </li>
  93.                     </ol>
  94.                 </li>
  95.                 <li>
  96.                     <p>
  97.                         日期格式化
  98.                     </p>
  99.                     <ol>
  100.                         <li>
  101.                             一个月中的第几天：{{ hello6 | date:'d' }} <!-- 9 -->
  102.                         </li>
  103.                         <li>
  104.                             英文星期：{{ hello6 | date:'EEEE' }} <!-- Thursday -->
  105.                         </li>
  106.                         <li>
  107.                             英文星期简写：{{ hello6 | date:'EEE' }} <!-- Thu -->
  108.                         </li>
  109.                     </ol>
  110.                 </li>
  111.                 <li>
  112.                     <p>
  113.                          小时格式化
  114.                     </p>
  115.                     <ol>
  116.                         <li>
  117.                             24小时制数字小时：{{hello6|date:'HH'}} <!--00-->
  118.                         </li>
  119.                         <li>
  120.                             一天中的第几个小时：{{hello6|date:'H'}} <!--0-->
  121.                         </li>
  122.                         <li>
  123.                             12小时制数字小时：{{hello6|date:'hh'}} <!--12-->
  124.                         </li>
  125.                         <li>
  126.                             上午或下午的第几个小时：{{hello6|date:'h'}} <!--12-->
  127.                         </li>
  128.                     </ol>
  129.                 </li>
  130.                 <li>
  131.                     <p>
  132.                          分钟格式化
  133.                     </p>
  134.                     <ol>
  135.                         <li>
  136.                             数字分钟数：{{ hello6 | date:'mm' }} <!-- 09 -->
  137.                         </li>
  138.                         <li>
  139.                             一个小时中的第几分钟：{{ hello6 | date:'m' }} <!-- 9 -->
  140.                         </li>
  141.                     </ol>
  142.                 </li>
  143.                 <li>
  144.                     <p>
  145.                          秒数格式化
  146.                     </p>
  147.                     <ol>
  148.                         <li>
  149.                             数字秒数：{{ hello6 | date:'ss' }} <!-- 02 -->
  150.                         </li>
  151.                         <li>
  152.                             一分钟内的第几秒：{{ hello6 | date:'s' }} <!-- 2 -->
  153.                         </li>
  154.                         <li>
  155.                             毫秒数：{{ hello6 | date:'.sss' }} <!-- .995 -->
  156.                         </li>
  157.                     </ol>
  158.                 </li>
  159.                 <li>
  160.                     <p>
  161.                          字符格式化
  162.                     </p>
  163.                     <ol>
  164.                         <li>
  165.                             上下午标识：{{ hello6 | date:'a' }} <!-- AM -->
  166.                         </li>
  167.                         <li>
  168.                             四位时区标识：{{ hello6 | date:'Z' }} <!--- 0700 -->
  169.                         </li>
  170.                     </ol>
  171.                 </li>
  172.                 <li>
  173.                     <p>
  174.                           自定义日期格式的示例
  175.                     </p>
  176.                     <ol>
  177.                         <li>
  178.                             {{ hello6 | date:'MMMd,y' }} <!-- Aug9,2013 -->
  179.                         </li>
  180.                         <li>
  181.                             {{ hello6 | date:'EEEE,d,M' }} <!-- Thursday,9,8-->
  182.                         </li>
  183.                         <li>
  184.                             {{ hello6 | date:'hh:mm:ss.sss' }} <!-- 12:09:02.995 -->
  185.                         </li>
  186.                     </ol>
  187.                 </li>
  188.             </ul>
  189.         </td>
  190.     </tr>
  191.     <tr>
  192.         <td align="right">字符串搜索选择器：</td>
  193.         <td>{{hello7|filter:"e"}}</td>
  194.     </tr>
  195.     <tr>
  196.         <td align="right">对象搜索选择器：</td>
  197.         <td>{{hello8|filter:{name:"To"} }}</td>
  198.     </tr>
  199.     <tr>
  200.         <td align="right">方法（函数）选择器：</td>
  201.         <td>{{hello7|filter:hello9}}</td>
  202.     </tr>
  203.     <tr>
  204.         <td align="right">JSON过滤器：</td>
  205.         <td>{{hello10|json}}</td>
  206.     </tr>
  207.     <tr>
  208.         <td align="right">字符串截断：</td>
  209.         <td>
  210.             <p>从左到右截断：{{hello11|limitTo:5}}</p>
  211.             <p>从右到左截断：{{hello11|limitTo:-5}}</p>
  212.         </td>
  213.     </tr>
  214.     <tr>
  215.         <td align="right">按姓名字母顺序排序：</td>
  216.         <td>{{hello8|orderBy:"name":true}}</td>
  217.     </tr>
  218. </table>
  219. </body>
  220. </html>


JS代码：

  1. var hello = angular.module("myApp",[]);
  2. hello.controller("HelloController",['$scope','$filter',$filter) {
  3.     $scope.hello2 = $filter('lowercase')("Hello World 2!");
  4.     $scope.hello3 = 1.23456789;
  5.     $scope.hello5 = 123.456;
  6.     $scope.hello6 = new Date();
  7.     $scope.hello7 = ['Ari','Lerner','Likes','To','Eat','Pizza'];
  8.     $scope.hello8 =
  9.         [{
  10.             name: "Ari",age: 21
  11.         },{
  12.             name: "Lerner",age: 22
  13.         },{
  14.             name: "Likes",age: 23
  15.         },{
  16.             name: "To",age: 24
  17.         },{
  18.             name: "Eat",age: 25
  19.         },age: 26
  20.         },{
  21.             name: "Pizza",age: 27
  22.         }];
  23.     $scope.hello9=function(value){
  24.         if(value.length>3){
  25.             return true;
  26.         }
  27.         return false;
  28.     };
  29.     $scope.hello10={
  30.         name:"李婷",age:22,hobby:"羽毛球"
  31.     };
  32.     $scope.hello11="你好，我叫李婷，我今年22岁了，我喜欢打羽毛球。";
  33.     $scope.hello12=function(){
  34.         return arguments[0][0]>arguments[1][0];
  35.     };
  36. }]);

2.3.9.自定义过滤器

过滤器本质上是一个会把我们输入的内容当作参数传入进去的函数。示例工程：T71。

HTML代码：

  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head lang="en">
  4.     <Meta charset="UTF-8">
  5.     <title>T71</title>
  6.     <script type="text/javascript" src="../vendor/angular.js"></script>
  7.     <script type="text/javascript" src="../controllers/hello.js"></script>
  8. </head>
  9. <body ng-controller="HelloController">
  10. <table border="1px" cellpadding="5" cellspacing="0" rules="all" style="border:solid 1px #0000FF;" width="100%">
  11.     <tr>
  12.         <td width="10%">请输入：</td>
  13.         <td width="90%"><input ng-model="description" type="text" placeholder="请输入你想说的话。" size="40"></td>
  14.     </tr>
  15.     <tr>
  16.         <td>您输入了：</td>
  17.         <td>{{description|wordUpper}}</td>
  18.     </tr>
  19. </table>
  20. </body>
  21. </html>

JS代码：

  1. var module=angular.module("myApp",[]);
  2. module.filter("wordUpper",function(){
  3.     return function(input){
  4.         if(!input){
  5.             return "";
  6.         }
  7.         if(typeof input !== "string"){
  8.             return "";
  9.         }
  10.         if(input.length<=0){
  11.             return "";
  12.         }
  13.         var ret="";
  14.         if(input[0]>='a'&&input[0]<='z'){
  15.             ret+=input[0].toUpperCase();
  16.         }else{
  17.             ret+=input[0];
  18.         }
  19.         if(input.length>2){
  20.             for(let i=1;i<input.length;i++){
  21.                 ret+=input[i];
  22.                 if(input[i]==' '){
  23.                     if(i+1<input.length){
  24.                         if(input[i+1]>='a'&&input[i+1]<='z'){
  25.                             ret+=input[i+1].toUpperCase();
  26.                             i++;
  27.                         }
  28.                     }
  29.                 }
  30.             }
  31.         }
  32.         return ret;
  33.     };
  34. });
  35. module.controller("HelloController",["$scope","$timeout",$timeout){
  36.     $scope.description="";
  37. }]);

2.3.10.表单验证

表单验证能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的，不仅能给用户提供有用的反馈，同时也能保护我们的Web应用不会被恶意或者错误的输入所破坏。我们要在Web前端尽力保护后端。虽然Web应用安全不能完全依赖客户端验证，但客户端验证可以提供表单状态的实时反馈。

表单的每一项的name属性不能为空。Angular的表单验证使用了部分HTML特性，低版本的浏览器上运行可能存在问题。如果想要屏蔽浏览器对表单的默认验证行为，可以在表单元素上添加 novalidate 标记。

必填项：required属性。最小长度：ng-minlength。最大长度：ng-maxlength。模式匹配：ng-pattern，属性值是正则表达式。电子邮件：type=email。数字：type=number。URL：type=url。自定义验证：通过自定义指令实现。

样式：.ng-pristine、.ng-dirty、.ng-valid、.ng-invalid。有条件改变DOM外观。$error、$valid、$invalid、$pristine作用表单项的属性验证表单是否符合规则，置于ng-show可用显隐输入提示，引用格式是：表单名.表单项名.规则.[错误子规则]。

示例工程：T72。

  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head lang="en">
  4.     <Meta charset="UTF-8">
  5.     <title>T72</title>
  6.     <script type="text/javascript" src="../vendor/angular.js"></script>
  7.     <script type="text/javascript" src="../controllers/hello.js"></script>
  8.     <link rel="stylesheet" href="../index.css">
  9. </head>
  10. <body ng-controller="StudentController">
  11. <h1 align="center">新增学生基本信息</h1>
  12. <ng-form name="form1" novalidate ng-submit="onSubmit()">
  13. <table border="1" cellspacing="0" cellpadding="5" width="500px"  rules="all" style="border:solid 1px #0000FF" align="center">
  14.     <tr>
  15.         <td width="35%" align="right">姓名：</td>
  16.         <td width="65%">
  17.             <input name="name" type="text" ng-minlength="2" ng-maxlength="7" ng-model="student.name" chinese-name="name" required>
  18.             <span ng-show="form1.name.$error.minlength">太短</span>
  19.             <span ng-show="form1.name.$error.maxlength">太长</span>
  20.             <span ng-show="form1.name.$error.chineseName&&!form1.name.$error.required">必须中文</span>
  21.             <span ng-show="form1.name.$error.required">必填</span>
  22.         </td>
  23.     </tr>
  24.     <tr>
  25.         <td align="right">性别：</td>
  26.         <td>
  27.             <select name="sex" ng-model="student.sex" style="width: 50px;" ng-options="sex for sex in sexs"  required></select>
  28.             <span ng-show="form1.sex.$error.required">必填</span>
  29.         </td>
  30.     </tr>
  31.     <tr>
  32.         <td align="right">身高：</td>
  33.         <td>
  34.             <input name="height" type="number" style="width: 50px;" ng-pattern="/^\d.\d{2}$/" ng-model="student.height" required>米
  35.             <span ng-show="form1.height.$error.required">必填</span>
  36.             <span ng-show="form1.height.$error.pattern">格式错误</span>
  37.         </td>
  38.  
  39.     </tr>
  40.     <tr>
  41.         <td align="right">电子邮箱：</td>
  42.         <td>
  43.             <input type="email" name="email" ng-model="student.email" required>
  44.             <span ng-show="form1.email.$error.required">必填</span>
  45.             <span ng-show="form1.email.$invalid&&!form1.email.$pristine">格式错误</span>
  46.         </td>
  47.     </tr>
  48.     <tr>
  49.         <td align="right">户口所属学区：</td>
  50.         <td>
  51.             <table border="0" cellpadding="0" cellspacing="0" width="100%">
  52.                 <tr ng-repeat="street in streets">
  53.                     <td ng-repeat="column in street.columns">
  54.                         <label>
  55.                             <input type="radio"
  56.                                    name="street"
  57.                                    ng-value="column.name"
  58.                                    ng-click="onStreetClicked(this)"
  59.                                    ng-model="student.street"
  60.                                    >
  61.                             {{column.name}}
  62.                         </label>
  63.                     </td>
  64.                 </tr>
  65.                 <tr ng-show="student.street.length==0"
  66.                     style="color:red">
  67.                     <td colspan="{{streets[0].columns.length}}">
  68.                         必须选择一个。
  69.                         <input type="hidden"
  70.                                name="streetHidden"
  71.                                ng-model="student.street"
  72.                                valid-street="student.street">
  73.                     </td>
  74.                 </tr>
  75.             </table>
  76.         </td>
  77.     </tr>
  78.     <tr>
  79.         <td align="right">学业成绩：</td>
  80.         <td><table border="0" cellpadding="0" cellspacing="0" width="100%">
  81.             <tr ng-repeat="examination in examinations">
  82.                 <td ng-repeat="column in examination.columns">
  83.                     <label>
  84.                         <input type="radio"
  85.                                name="examination"
  86.                                ng-value="column.name"
  87.                                ng-click="onExaminationClicked(this)"
  88.                                ng-model="student.examination">
  89.                         {{column.name}}
  90.                     </label>
  91.                 </td>
  92.             </tr>
  93.             <tr ng-show="student.examination.length==0"
  94.                 style="color:red">
  95.                 <td colspan="{{examinations[0].columns.length}}">
  96.                     必须选择一个。
  97.                     <input type="hidden"
  98.                            name="examinationHidden"
  99.                            valid-examination="student.examination"
  100.                            ng-model="student.examination">
  101.                 </td>
  102.             </tr>
  103.         </table></td>
  104.     </tr>
  105.     <tr>
  106.         <td align="right">爱好：</td>
  107.         <td><table border="0" cellpadding="0" cellspacing="0" width="100%">
  108.             <tr ng-repeat="hobby in hobbies">
  109.                 <input type="hidden" value="{{hobbyIndex=$index}}">
  110.                 <td ng-repeat="column in hobby.columns">
  111.                     <label>
  112.                         <input type="checkBox"
  113.                                ng-value="column.checked"
  114.                                ng-change="onHobbyChanged(this)"
  115.                                ng-model="bindHobbies[hobbyIndex][$index]">
  116.                         {{column.name}}
  117.                     </label>
  118.                 </td>
  119.             </tr>
  120.             <tr ng-show="isHobbyInvalid()"
  121.                 style="color:red">
  122.                 <td colspan="{{hobbies[0].columns.length}}">
  123.                     至少选择一个。
  124.                     <input type="hidden"
  125.                            ng-model="hobbyUpdated"
  126.                            valid-hobby="hobbyUpdated"
  127.                            name="hobbyHidden">
  128.                 </td>
  129.             </tr>
  130.         </table></td>
  131.     </tr>
  132.     <tr>
  133.         <td></td>
  134.         <td>
  135.             <input type="submit" value="提交" ng-click="onSubmitClicked" ng-disabled="!form1.name.$valid">
  136.             <input type="reset" value="重置" ng-click="onResetClicked">
  137.         </td>
  138.     </tr>
  139. </table>
  140. </ng-form>
  141. </body>
  142. </html>

JS代码：

  1. var module = angular.module("myApp",[]);
  2.  
  3. module.directive("chineseName",function($http){
  4.     return {
  5.         require:"ngModel",link:function(scope,ele,attrs,c){
  6.             console.log(c);
  7.             scope.$watch(attrs.ngModel,function() {
  8.                 var str = ele.val();
  9.                 for (let i = 0; i < str.length; i++) {
  10.                     if (str.charCodeAt(i) < 128) {
  11.                         c.$setValidity("chineseName",false);
  12.                         return;
  13.                     }
  14.                 }
  15.                 c.$setValidity("chineseName",true);
  16.             });
  17.         }
  18.     };
  19. });
  20.  
  21. module.directive("validStreet",c){
  22.             scope.$watch(attrs.ngModel,function(){
  23.                 c.$setValidity("validStreet",scope.student.street.length==0);
  24.             });
  25.         }
  26.     };
  27. });
  28.  
  29. module.directive("validExamination",function(){
  30.                 c.$setValidity("validExamination",scope.student.examination.length==0);
  31.             });
  32.         }
  33.     };
  34. });
  35.  
  36. module.directive("validHobby",function($http){
  37.     return {
  38.         require:'ngModel',c){
  39.             scope.$watch("hobbyUpdated",function(){
  40.                 c.$setValidity("validHobby",scope.student.hobbies.length==0);
  41.             });
  42.         }
  43.     };
  44. });
  45.  
  46. module.controller("StudentController",function ($scope) {
  47.     initDatas($scope);
  48.     initListeners($scope);
  49.     $scope.streetIndex=0;
  50.     $scope.examinationIndex=0;
  51.     $scope.hobbyIndex=0;
  52.     $scope.student = {
  53.         name: "",sex: "",height: "",email: "",street:"",examination:"",hobbies:[]
  54.     };
  55.  
  56. }]);
  57.  
  58. function initDatas($scope){
  59.     $scope.sexs = ["男","女"];
  60.     $scope.hobbyIndex=-1;
  61.     $scope.bindHobbies=[[]];
  62.     $scope.hobbyUpdated=new Date();
  63.     $scope.streets = [{
  64.         columns: [{
  65.             name: "粤海街道",checked: true
  66.         },{
  67.             name: "蛇口街道",checked: false
  68.         }]
  69.     },{
  70.         columns: [{
  71.             name: "赤湾街道",checked: false
  72.         },{
  73.             name: "华侨城街道",{
  74.         columns:[{
  75.             name: "大学城街道",{
  76.             name: "西丽街道",checked: false
  77.         }]
  78.     }];
  79.     $scope.examinations = [{
  80.         columns: [{
  81.             name: "A",{
  82.             name: "B",{
  83.         columns: [{
  84.             name: "C",{
  85.             name: "D",{
  86.         columns:[{
  87.             name: "E",{
  88.             name: "F",checked: false
  89.         }]
  90.     }];
  91.     $scope.hobbies = [{
  92.         columns: [{
  93.             name: "围棋",{
  94.             name: "象棋",{
  95.         columns: [{
  96.             name: "书法",{
  97.             name: "绘画",{
  98.         columns:[{
  99.             name: "钢琴",{
  100.             name: "古筝",checked: false
  101.         }]
  102.     }];
  103. }
  104.  
  105. function initListeners($scope){
  106.     $scope.isHobbyInvalid=function(){
  107.         return $scope.student.hobbies.length==0;
  108.     };
  109.  
  110.     //onchanged比isHobbyInvalid执行要早
  111.     $scope.onHobbyChanged=function(dom){
  112.         var col=dom.column;
  113.         col.checked=!col.checked;
  114.         var index=$scope.student.hobbies.indexOf(col);
  115.         if(col.checked){
  116.             if(index==-1){
  117.                 $scope.student.hobbies.push(col);
  118.             }
  119.         }else{
  120.             if(index!=-1){
  121.                 $scope.student.hobbies.splice(index,1);
  122.             }
  123.         }
  124.         $scope.hobbyUpdated=new Date();
  125.     };
  126.  
  127.     $scope.onStreetClicked=function(context){
  128.         console.log($scope.student.street);
  129.     };
  130.  
  131.     $scope.onExaminationClicked=function(context){
  132.         console.log($scope.student.examination);
  133.     };
  134.  
  135.     $scope.isExistsInvalid=function(){
  136.         console.log(document.getElementsByName("streetHidden")[0].$error);
  137.     };
  138.  
  139.     $scope.onSubmitClicked=function(){
  140.  
  141.     };
  142.  
  143.     $scope.onResetClicked=function(){
  144.  
  145.     }
  146.  
  147.     $scope.onSubmit=function(){
  148.  
  149.     }
  150. }

转载时请遵重他人的劳动成果，不要删除作者原文链接。
转载请注明来源：http://blog.csdn.net/caoshiying。谢谢合作。

猜你在找的Angularjs相关文章

AngularJS 简介
AngularJS 是一个JavaScript 框架。它可通过 注：建议把脚本放在 元素的底部。这会提高网页...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题，也即是页面闪烁问题。出现这个的...
AngularJS 指令
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HT...
AngularJS 表达式
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内...
AngularJS 表格
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用...
AngularJS 控制器
AngularJS 控制器控制AngularJS 应用程序的数据。AngularJS 控制器是常规的JavaScript 对象...
AngularJS Filters
过滤器可以使用一个管道字符（|）添加到表达式和指令中。AngularJS 过滤器AngularJS 过滤器...
KeyPress 和KeyDown 、KeUp之间的区别
keyup适用于文本框的数据输入和同步，以及数据的获取；keydown 与 keypress更适用于通过键...
angularjs -- 页面模板清除
angularJs模板缓存的清除，包括传统的 HTML标签设置清除缓存，以及angularJs的一些配置清除...
angularjs -- 监听angularJs列表数据是否渲染完毕
前端在做数据渲染的时候经常会遇到在数据渲染完毕后执行某些操作，这几天就一直遇到在列表...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作