Some questions and solutions about Angularjs's own learning and development process

This article may not be updated regularly, the main record of this period of time in the ANGULARJS learning to develop some of the problems of the solution. This article to excerpt mainly, the main purpose or the confusion of their own in various places to find the solution of the summary, to leave a memo for themselves.

1, novice in the initial use of Angularjs router often forget to refer to angular-route.min.js and injection related dependencies, resulting in similar

  uncaught  Error: [ $injector :< Span class= "PLN" >modulerr] Http:// errors.angularjs.org/1.2.0rc1/$injector/modulerr?p0=muninn&p1=error%...eapis.com%2fajax%2flibs%2fangularjs% 2f1.2.0rc1%2fangular.min.js%3a31%3a252)               
 
 Error. 
 
 Workaround: Reference and inject the corresponding dependency. 
 
 Reference from: 
 
 http://stackoverflow.com/questions/18287482/angularjs-1-2-injectormodulerr/18287586# 18287586 
 
 
 2, Ngclass, you can use Ngclass to control some of the CSS style of the node, to implement some actions such as display or not, here refers to a Ngclass introduction 
 
 From: 
/http Www.cnblogs.com/whitewolf/archive/2013/05/22/3092184.html 
 
 3, angular rewrite the use tip of the form, first describes the problem I encountered: 

1. A set of data that is returned by the back-end interface is bound to a scope object and then recycled to a table, selecting one row of the table to modify the information.
2. Different fields need to be verified differently, and there are non-required fields if you need format validation to fill in, validation does not pass by not committing
3. Do not submit a form that has not been modified

Workaround:

1. Data binding this piece does not need to repeat, to the cyclic TR tag binding Ngclick event,
   
   In order to remove the two-way binding of the incoming data and the popup modification information data, you can use the Angular.copy () method to copy the data and then bind to the form.
2. To verify the different forms, you can refer to the following article
   Http://www.cnblogs.com/lvdabao/p/3533585.html
3. For unmodified forms, refer to Mate gdisabled= "Memberform. $invalid | | Memberform. $pristine "to process

4, page management, online has a lot of angular page management information, my side according to their own needs to write a self-pagination, perhaps not suitable for the public, for reference only

My design ideas are as follows: The design background is the back end of the students to provide all the entries and the number of pages per page and the current page, my side based on the total number of pages, where the page is displayed as the current pages as the center of the nearest 8 pages, if the current page before 4 pages or in the last four pages, The 9 pages are displayed in turn.

　　　　　　　　　　　　　　　　　　

if(Resp.data.page.rowsCount = = 0) {$scope. Nosearch=false; }Else{$scope. Nosearch=true; } $scope. MemberInfo=Resp.data; $scope. Pagination= {}; $scope. Pagination.length= Math.ceil (Resp.data.page.rowsCount/resp.data.page.pageSize); $scope. Perpage=false; $scope. NextPage=false; if($scope. Memberinfo.pageindex = = ' 1 ') {$scope. Perpage=true; }Else if($scope. Memberinfo.pageindex = =$scope. Pagination.length) {$scope. nextPage=true; } $scope. isActive=function(data) {if(Data = =$scope. Memberinfo.pageindex) {                                        return true; }Else{                                        return false; }} $scope. pagination.info= []; if($scope. pagination.length > 10){                                    varUpboundary = parseint (resp.data.page.pageIndex) + 4 > 9? parseint (resp.data.page.pageIndex) + 4:9; Upboundary= Upboundary <= $scope. pagination.length?upboundary: $scope. pagination.length; varDownboundary = parseint (resp.data.page.pageIndex)-4 < 1? 1:parseint (Resp.data.page.pageIndex)-4; Downboundary= $scope. pagination.length-downboundary >= 9? Downboundary: $scope. pagination.length-9; varCurrentPage =parseint (Resp.data.page.pageIndex);  for(vari = 1; i<= $scope. pagination.length; i++){                                        varup = i <= upboundary && i >=currentpage; vardown = i >= downboundary && i <=currentpage; if(Up | |Down )                                        {$scope. Pagination.info.push (i); }                                    }                                }Else{                                     for(vari = 1; i<= $scope. pagination.length; i++) {$scope. Pagination.info.push (i); }                                }      

The final design results are shown as:

　　

Less than 9 pages of automatic with the actual number of main, specific click on the effect of each page can be written separately, not complex

5, the provinces and cities of the Cascade, in the form of address input, can choose the situation in the province of the city is more convenient than the user manual input and can guarantee the accuracy of the data. What I have encountered here is that the backend classmates return different query results through the different state of the interface, so that I can make the cascade call of the city, and make the interface information call with the data of the user already.

The design idea is as follows, if the form is already included, then cascade the query based on the province ID returned by the backend, and if not, bind the Ngchange event on top of the Select element, resulting in a consistent effect. This part of the code is relatively simple, there is no example.

These are the results of my memo during the development of this project, and may not be updated periodically.

Some questions and solutions about Angularjs's own learning and development process