Home > Developer > Web Develop
This section is relatively not too much to understand, just remember those APIs.
It is also a case (also from Miaov), a form validation, a code first, and then an explanation of the corresponding content.
<!DOCTYPE HTML><HTMLLang= "en"Ng-app= "MYAPP"><Head> <MetaCharSet= "UTF-8"> <title>Title</title></Head><DivNg-controller= "Aaa"> <formnovalidate name= "Nform"> <Div> <label>User name</label> <inputtype= "text"name= "NText"Ng-model= "Regtext.name"Required Ng-pattern= "/^[a-za-z]+$/"Ng-blur= "Change (' Regtext ', Nform.ntext. $error)"> <spanng-repeat= "Re in Regtext.reglist|filter:regtext.regval">{{Re.tips}}</span> </Div> <Div> <label>Password</label> <inputtype= "text"name= "Npassword"Ng-model= "Regpassword.name"Required Ng-minlength= "6"Ng-blur= "Change (' Regpassword ', Nform.npassword. $error)"> <spanng-repeat= "Re in Regpassword.reglist|filter:regpassword.regval">{{Re.tips}}</span> </Div> </form></Div><Body><Scriptsrc= "Angular.min.js"></Script><Script> varM1=Angular.module ("myApp",[]); M1.controller ("Aaa",["$scope", function($scope) {$scope. Regtext={regval:'default', reglist: [{name:'default', tips:'Please enter user name'}, {name:'Required', tips:'user name cannot be empty'}, {name:'pattern', tips:'the user name must be a letter'}, {name:'Pass', tips:'√'} ] }; $scope. Regpassword={regval:'default', reglist: [{name:'default', tips:'Please enter your password'}, {name:'Required', tips:'The password cannot be empty'}, {name:'minlength', tips:'Password at least 6 digits'}, {name:'Pass', tips:'√'} ] }; $scope. Change=function(reg,err) { for(varattrincherr) { if(Err[attr]==true) {$scope [Reg].regval=attr; return; }} $scope [Reg].regval="Pass"; } }]);</Script></Body></HTML>1 module
The benefits of this thing I have not yet realized, probably because of the amount of code to do something is too small. Its function basically is that the code is divided into several blocks according to the function, so that it can effectively prevent the controller's confusion (in my opinion, another level of classification management).
The specific code is
In HTML
<lang= "en" ng-app= "myApp">
where "myApp" is the name of the module.
The corresponding JS code
var m1=angular.module ("MyApp", []);The second parameter is the module that the module needs to rely on.
Of course, the controller's writing will change, at least you have to tell the program which controller is written in which module.
M1.controller ("Aaa", ["$scope", function ($scope) {//code }]);Where $scope is injected into the service
2. Form-relatedForm validation related operations in fact, most of it is written in the label
< input type = "text" name = "NText" Ng-model = "Regtext.name" required Ng-pattern = "/^[a-za-z]+$/" Ng-blur = "Change (' Regtext ', Nform.ntext. $error)" > What these APIs mean is not to be careful, anyway it means some string validation rules that you want to pass on must conform to these rules. Of course, if you just want to tell the user not to pass through and do not want to write so many reasons, can be a regular fix. The point is: what's going to happen? Very simple, but the words ng-model the corresponding variable value is undefined. Another notable issue is when to trigger the validation, change the validation hint (or write logic). There is a category like Baidu search hint, the input content changes a bit triggered once, but in fact, for form validation is not appropriate, because 1. In fact, you only need to be in the user feel that the validation, Doing so will add a lot of unnecessary code to run 2. If you set a limit like the length of a field, you might jump out of "long enough" when you enter in half. If I encounter this kind of form verification, my heart will certainly silently scold a sentence: I have not finished the TM. So it's good to verify when the input tag loses focus, because it basically means that the user feels like I'm done typing. It is not too late to live.
<ng-repeat= "Re in Regpassword.reglist|filter:regpassword.regval"> {{Re.tips}} </ span >Ng-repeat it seems to me to be in a data presentation scenario that defines the HTML structure based on the data length used in <li> <table>. It's kind of like a for-in loop.
For example, in the case of the above, the span tag is the number of elements in the regpassword.reglist, regardless of the filter, and the object to iterate over can be an array or an object.
Filter is the role of filtering out the required strings, of course, there are other filters, see for themselves, are the API. Filter means filtering out the re that conforms to Regpassword.regval. Well, of course, when you write a true word, it turns out to be an exact match, not an inclusion.
This part is relatively simple, so you can save the province. The next step is to write a very important part about angular, routing (ng-route).
ANGULARJS Study notes (ii) Form validation case (Ng-repeat/filter)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
