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

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

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

首先，肯定是引用

1 <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的。

 1 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");
 2
 3     function bindRep(app, controller, url, validation, bind) {
 4         var appData = angular.module(app, []);
 5         appData.controller(controller, function ($scope, $http) {
 6             $http.get(url)
 7            .success(function (response) { $scope.pageData = response.Data; });
 8         });
 9         appData.directive(bind, [
10                function () {
11                    return {
12                        require: "ngModel",
13                        link: function (scope, element, attr, ngModel) {
14                            if (ngModel) {
15                                var idCardsRegexp = eval(validation);
16                                console.log(idCardsRegexp);
17                            }
18                            debugger;
19                            var customValidator = function (value) {
20                                var validity = ngModel.$isEmpty(value) || idCardsRegexp.test(value);
21                                ngModel.$setValidity(bind, validity);
22                                return validity ? value : undefined;
23                            };
24                            ngModel.$formatters.push(customValidator);
25                            ngModel.$parsers.push(customValidator);
26                        }
27                    };
28                }
29         ]);
30     }

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

 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>