About ANGULARJS, data binding and custom validation

Recently began to learn the angular, with a curious mood began to study up. Suddenly found that angular can be clever and convenient data binding verification ah what. (Of course, I'm just beginning to learn that all may have more powerful features, just I haven't seen yet)

So let's start with data binding and data validation that I'm learning.

First, it's definitely a reference.

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

Then it needs a template

<form ng-app= "myApp" name= "MyForm" > <div ng-controller= "myctrytest" > <table> <tr> <td> name </td> <td> Age </td> <                    /tr> <tr ng-repeat= "x in Pagedata" > <td>{{x.name}}</td> <td>{{x.age}}</td> </tr> </table> </div>Enter your name:<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= "Custom validation "/>validation passed: {{myform.user_idcard. $valid}}</form>

Ng, which is a prefix to angular's own attributes, is the equivalent of a block of code in the form, and it can be understood as an ID, which I understand anyway.
It's really like MVC, it also needs a controller of its own, to define a div or something that needs to be done, and you can see the second line of my
Ng-repeat, is defining a loop, X in Pagedata, is this not much like a foreach? X is the defined variable name in which the data comes from,
Pagedata is our data, then you will certainly ask, where did pagedata come from? We look at the following JS, in line seventh, I response the data returned to the Pagedata, that is, I loop is from the server to obtain
Data, the following is the example of JS, I made a simple package.
Then as to verify, like email ah, number ah, this in angular, you just in input, type= "email" or "number" is good, if non-empty, directly add a required is good, it is important to note that

{{myform.myaddress. $valid}}, this myForm refers to the name,myaddress in your form as the name in input, so $valid is to return a validation pass, True or FALSE, primarily required
The concern is that our custom verification, in the entire appdata.directive is to achieve the custom validation, then, how this JS and input is related?
You can see, in input, there is a custom attribute, Multiple-idcard, then, in my encapsulated JS method of the last parameter Multipleidcard, are they two the same? So, what we should note is that in
We have a custom attribute in input, one in the middle-in JS, the first letter in the back is capitalized so that they can match up.
Isn't it simple? After studying, I still like angular.

1Window.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     functionBindrep (app, controller, URL, validation, bind) {4         varAppData =angular.module (app, []);5Appdata.controller (Controller,function($scope, $http) {6 $http. Get (URL)7. Success (function(response) {$scope. Pagedata =Response. Data; });8         });9 appdata.directive (BIND, [Ten                function () { One                    return { ARequire: "Ngmodel", -Linkfunction(scope, element, attr, Ngmodel) { -                            if(Ngmodel) { the                                varIdcardsregexp =eval (validation); - Console.log (idcardsregexp); -                            } -                            Debugger; +                            varCustomValidator =function(value) { -                                varValidity = Ngmodel. $isEmpty (value) | |idcardsregexp.test (value); + Ngmodel. $setValidity (bind, validity); A                                returnValidity?value:undefined; at                            }; - Ngmodel. $formatters. push (CustomValidator); - Ngmodel. $parsers. push (CustomValidator); -                        } -                    }; -                } in         ]); -}

This is the data I returned from the server.

StringBuilder Sbujson =NewStringBuilder (); 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 ();

This is my 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>

About ANGULARJS, data binding and custom validation