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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章