關於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>