关于AngularJs，数据绑定与自定义验证

         最近开始着手学起了Angular，抱着好奇的心情开始研究了起来。忽然发现angular可以巧妙而方便的进行数据的绑定验证啊什么的。（当然，我只是刚开始学，所有可能有更强大的功能，只是我还没有看到）

         那么先从我学习的数据绑定和数据验证开始说起吧

         首先，肯定是引用

         

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

然后它需要一个模板

   <form ng-app="myApp" name="myForm">
        <div ng-controller="MyCtryTest">
            <table>
                <tr>
                    <td>姓名</td>
                    <td>年龄</td>
                </tr>
                <tr ng-repeat="x in pageData">
                    <td>{{ x.Name }}</td>
                    <td>{{ x.Age }}</td>
                </tr>
            </table>
        </div>
        输入你的名字:
    <input name="myName" ng-model="myText" required>
        Email:
       <input type="email" name="myAddress" ng-model="myAddressText" required>
        {{myForm.myAddress.$valid}}
       
         <input multiple-idcard name="user_idCard" ng-model="user.idCard" required class="form-control" placeholder="自定义验证" />
        验证通过：{{myForm.user_idCard.$valid}}
    </form>

ng，是angular规定的自己属性的一个前缀，form中的app就是相当于一个代码块，也可以理解为ID吧，反正我是这么理解的。
其实它特别像MVC，它也需要一个自己的controller，来定义一个div或者什么里面需要做的事情，大家可以看到我第二行的
ng-repeat，就是定义一个循环，x in pageData，这里是不是很像foreach？x是定义的变量名， in 是数据从哪里来，
pageData就是我们的数据，那么大家肯定会问，pageData是哪里来的？大家看下面的js，在第七行中，我把response中返回的Data给了pageData，也就是说，我循环的就是从服务端取得的
数据，下面就是实例中的js，我做了一个简单的封装。
然后至于验证，像email啊，number啊，这个在angular中都有，你只要在input中，type="email"或"number"就好了，如果是非空的话，直接加一个required就好，则重需要注意的就是

{{myForm.myAddress.$valid}}，这个中的myForm，指的就是你form中给的name，myAddress是input中的name，那么，$valid就是返回一个验证是否通过，true或false，主要需要
关心的，是我们的自定义验证，在整个 appData.directive 中都是为了实现自定义验证，那么，这个js和input是怎么关联起来的呢？
大家可以看一下，在input中，有一个自定义属性，multiple-idcard，那么，在我封装的js方法中的最后一个参数multipleIdcard，他们两个是不是相同的呢？那么，我们要注意的是，在
我们input中的自定义属性，中间要有一个-，在js中，-后面的首字母要大写，这样他们两就能匹配起来了。
是不是很简单？学习了下，我还是蛮喜欢angular的。

window.onload = bindRep("myApp", "MyCtryTest", "/Data/repData.ashx", "/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/", "multipleIdcard");

    function bindRep(app, controller, url, validation, bind) {
        var appData = angular.module(app, []);
        appData.controller(controller, function ($scope, $http) {
            $http.get(url)
           .success(function (response) { $scope.pageData = response.Data; });
        });
        appData.directive(bind, [
               function () {
                   return {
                       require: "ngModel",
                       link: function (scope, element, attr, ngModel) {
                           if (ngModel) {
                               var idCardsRegexp = eval(validation);
                               console.log(idCardsRegexp);
                           }
                           debugger;
                           var customValidator = function (value) {
                               var validity = ngModel.$isEmpty(value) || idCardsRegexp.test(value);
                               ngModel.$setValidity(bind, validity);
                               return validity ? value : undefined;
                           };
                           ngModel.$formatters.push(customValidator);
                           ngModel.$parsers.push(customValidator);
                       }
                   };
               }
        ]);
    }

 这是我从服务端返回的数据

 StringBuilder sbuJson = new StringBuilder();
            sbuJson.AppendLine("{"Data":[");
            sbuJson.AppendLine("{"Name":"zhangsan","Age":"18"},");
            sbuJson.AppendLine("{"Name":"lisi","Age":"19"},");
            sbuJson.AppendLine("{"Name":"wangwu","Age":"20"},");
            sbuJson.AppendLine("{"Name":"zhaoliu","Age":"21"},");
            sbuJson.AppendLine("{"Name":"hehe","Age":"22"},");
            sbuJson.AppendLine("{"Name":"haha","Age":"23"},");
            sbuJson.AppendLine("{"Name":"heihei","Age":"24"},");
            sbuJson.AppendLine("{"Name":"gaga","Age":"25"},");
            sbuJson.AppendLine("{"Name":"xixi","Age":"26"}");
            sbuJson.AppendLine("]}");
            context.Response.Write(sbuJson.ToString());
            context.Response.End();

这是我的style

 <style>
        table, th, td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
        }

            table tr:nth-child(odd) {
                background-color: #f1f1f1;
            }

            table tr:nth-child(even) {
                background-color: #ffffff;
            }

        input.ng-invalid {
            background-color: lightblue;
        }
    </style>