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

时间：2023-03-08 18:58:16

这篇文章也许会不定时更新，主要记录这段时间内自己遇到的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://*.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);

                                    }

                                }

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

　　aaarticlea/png;base64,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" alt="" />

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

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

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

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

------------------------------------2016年8月27日更新---------------------------------

  1. 通过ng-bind进行数据绑定在有filter的情况下做字符串的拼接。简单介绍一下遇到的情况，就是产品设计稿里要求在当前的表格中打印出后端返回的数据的同时，跟上一个其他内容，比如某个单元格打印，金额+备注这种形式，如果我们写ng-bind="amount | filter + remark"这种拼接形式会报错，正确的做法是使用（）来提升运算符的优先级，ng-bind="(amount | filter) + remark"使得将格式化后的字符串再进行拼接，或者可以使用filter传参的形式将需要拼接的内容以参数的形式传给回掉函数，来实现在filter里面拼接并返回。filter传参写法为ng-bind="amount | filter : remark"。
    第一种字符串拼接可以参考这个答案：http://*.com/questions/24463473/add-more-text-after-using-a-filter-in-ng-bind-in-angularjs
    第二种传参的形式可以参考以下：http://www.cnblogs.com/lvdabao/p/3475426.html
  2. 另一个是一个备忘，我在实际开发过程中遇到需要将通过ng-repeat显示的数据需要判定显示在不同单元格的时候，并没有找到特别好的办法，我的做法是将服务器返回的数据自己在controller 里面进行二次循环然后对循环的数据直接格式化，来实现前端模板渲染的效果，如果哪天在哪里看到更好的办法，就会回这里补充。

相关文章