一些关于angularJS的自己学习和开发过程中遇到的问题及解决办法

这篇文章也许会不定时更新，主要记录这段时间内自己遇到的angularjs学习开发的一些问题的解决办法。本文以摘抄为主，主要目的还是将自己遇到的困惑在各个地方查到的解决办法的汇总，给自己留个备忘吧。

1、新手在初次使用angularJS router的时候往往会忘记引用angular-route.min.js以及注入相关依赖，导致类似

Uncaught Error: [$injector: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)

报错。

解决方法：引用并注入对应的依赖。

引用来自：

http://stackoverflow.com/questions/18287482/angularjs-1-2-injectormodulerr/18287586#18287586

2、ngCLass，可以使用ngClass来控制某些节点的css样式，来实现一些诸如显示与否的操作，这里引用一篇ngClass的介绍

来自：http://www.cnblogs.com/whitewolf/archive/2013/05/22/3092184.html

3、angular重写的form的使用tip，先描述我遇到的问题：

1. 通过后端接口返回的一组数据绑定到scope对象再循环打印到一个表格中，选中表格其中一行来进行修改信息。
2. 需要对不同的字段做不同的验证，并且存在非必填字段如果填写也需要格式验证，验证不通过不提交
3. 对未进行过修改的表单不提交

解决方法：

1. 数据绑定这块儿不需要赘述，给循环的tr标记绑定ngCLick事件，

   传入循环的一组data数据，为了去掉传入的数据与弹出修改信息数据之前的双向绑定，可以使用angular.copy（）方法复制一份数据然后再绑定到表单上面。

2. 对不同的表单进行验证，则可以参考下面的这一篇文章
   http://www.cnblogs.com/lvdabao/p/3533585.html
3. 对于未修改的表单可以参考配合gDisabled="memberForm.$invalid || memberForm.$pristine"来进行处理

　　4、分页管理，网上有很多的angular的分页管理的资料，我这边根据自己的需求写了一个自己分页，也许不适合大众，仅供参考

　　　　我的设计思路如下：设计背景是后端的同学提供本次查询的所有条目以及每页数量以及当前页码，我这边根据总数计算出页数，其中页数的显示为，以当前页为中心显示就近的前后8页，如果当前页在4页之前或者在最后的四页之内，则依次顺推显示够9页

                                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){
                                    var upBoundary = parseInt(resp.data.page.pageIndex) + 4 > 9 ? parseInt(resp.data.page.pageIndex) + 4 : 9;
                                    upBoundary = upBoundary <= $scope.pagination.length ? upBoundary : $scope.pagination.length;
                                    var downBoundary = 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;
                                    var currentPage = parseInt(resp.data.page.pageIndex);

                                    for(var i = 1; i<= $scope.pagination.length; i++){
                                        var up = i <= upBoundary && i >= currentPage;
                                        var down = i >= downBoundary && i <= currentPage;
                                        if(up || down){

                                            $scope.pagination.info.push(i);

                                        }
                                    }
                                }else{
                                    for(var i = 1; i<= $scope.pagination.length; i++){

                                        $scope.pagination.info.push(i);

                                    }
                                }      

　　最后的设计结果显示如下图：

　　不足9页的自动以实际数量为主，具体的单击每页的效果可以单独写，并不复杂

　　5、省市区级联，在表单里面进行地址输入的时候，能够选择省市区的情况下自然就比用户手动输入要方便并且能够保证数据的准确性。这里我所遇到的情况便是后端同学通过接口不同的状态返回不同的查询结果来供我进行省市区的级联调用，配合用户已经数据的数据进行接口信息调用。

　　设计思路如下，如果表单内已经包括，则根据后端返回的省ID进行级联查询，如果没有则绑定ngChange事件在select元素上面，最终实现，一致的效果。这部分的代码比较简单，这里就不贴示例了

以上便是我这个项目开发过程中备忘的结果，说不定以后不定期更新。