angular1坑之ng-repeat

最新推荐文章于 2024-01-28 05:15:00 发布
最新推荐文章于 2024-01-28 05:15:00 发布
阅读量899 收藏
点赞数
分类专栏： angular1 文章标签： ng-repeat ng-repeat数据改变页面上没显示
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DreamFJ/article/details/82593262
版权

功能：有一个页面，输入查询条件，点击查询按钮后从后台返回数据并显示在页面的表格中，并在页面滚动到最下面时实现下拉加载。

下拉加载什么的前面的博客已经讲过了，这里不再讲了，这里主要是记录bug问题，在从后台返回数据并成功加到数组后面了，但是页面上并没有渲染出来，好怀念vue.js的v-for啊啊啊啊啊，然后就去上网找填坑的方法，说是要用$scope.$apply();好像跟什么脏值检测有关，ok，我在本地写了一个简单的页面试试水

test.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <table border="1">
            <tr ng-repeat="x in records track by $index">
                <td>{{x.Name}}</td>
                <td>{{x.Country}}</td>
            </tr>
        </table>
    </div>
        
    <script>
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function($scope, $window) {
            $scope.records = [{
                "Name": "Alfreds Futterkiste",
                "Country": "Germany"
            }, {
                "Name": "Berglunds snabbk",
                "Country": "Sweden"
            }, {
                "Name": "Centro comercial Moctezuma",
                "Country": "Mexico"
            }, {
                "Name": "Ernst Handel",
                "Country": "Austria"
            }, {
                "Name": "Alfreds Futterkiste",
                "Country": "Germany"
            }, {
                "Name": "Berglunds snabbk",
                "Country": "Sweden"
            }, {
                "Name": "Centro comercial Moctezuma",
                "Country": "Mexico"
            }, {
                "Name": "Ernst Handel",
                "Country": "Austria"
            }, {
                "Name": "Alfreds Futterkiste",
                "Country": "Germany"
            }, {
                "Name": "Berglunds snabbk",
                "Country": "Sweden"
            }, {
                "Name": "Centro comercial Moctezuma",
                "Country": "Mexico"
            }, {
                "Name": "Ernst Handel",
                "Country": "Austria"
            }, {
                "Name": "Alfreds Futterkiste",
                "Country": "Germany"
            }, {
                "Name": "Berglunds snabbk",
                "Country": "Sweden"
            }, {
                "Name": "Centro comercial Moctezuma",
                "Country": "Mexico"
            }, {
                "Name": "Ernst Handel",
                "Country": "Austria"
            }];

            var tempData = [{
                        "Name": "1",
                        "Country": "test1"
                    }, {
                        "Name": "2",
                        "Country": "test2"
                    }, {
                        "Name": "3",
                        "Country": "test3"
                    }, {
                        "Name": "1",
                        "Country": "test1"
                    }, {
                        "Name": "2",
                        "Country": "test2"
                    }, {
                        "Name": "3",
                        "Country": "test3"
                    }, {
                        "Name": "1",
                        "Country": "test1"
                    }, {
                        "Name": "2",
                        "Country": "test2"
                    }, {
                        "Name": "3",
                        "Country": "test3"
                    }, {
                        "Name": "1",
                        "Country": "test1"
                    }, {
                        "Name": "2",
                        "Country": "test2"
                    }, {
                        "Name": "3",
                        "Country": "test3"
                    }, {
                        "Name": "1",
                        "Country": "test1"
                    }, {
                        "Name": "2",
                        "Country": "test2"
                    }, {
                        "Name": "3",
                        "Country": "test3"
                    }];

            $window.onscroll = function() {
                clients = $window.innerHeight || $window.document.documentElement.clientHeight || $window.document.body.clientHeight;
                scrollTop = $window.document.documentElement.scrollTop;
                wholeHeight = $window.document.documentElement.scrollHeight;
                if (clients + scrollTop >= wholeHeight) {
                    console.log("我到底部了");
                    // 模拟异步请求数据
                    setTimeout(() => {
                       $scope.records.push(...tempData);
                       $scope.$apply(); // 这里一定要哦！！
                    }, 1000);
                }
            }
        });
    </script>

</body>

</html>

运行果然没问题，可以显示，看网上很多说是因为setTimeout或者用jquery的ajax等异步问题就会出现这种情况，因为angular本身存在脏值检测，但是由于你是异步，所以脏值检测已经过去了，所以页面才没有更新的，但是我不用setTimeout也非要用$scope.$apply()才能更新页面，更奇怪的是，如果我通过点击事件来改变时不需要$scope.$apply()就能及时更新，下拉加载就要。。。。什么鬼哦？？

点击触发增加数据，完全不用$scope.$apply()

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <table border="1">
            <tr ng-repeat="x in records track by $index">
                <td>{{x.Name}}</td>
                <td>{{x.Country}}</td>
            </tr>
        </table>
        <button ng-click="loadMore()">点我</button>
    </div>
        
    <script>
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function($scope, $window) {      
            $scope.records = [{
                "Name": "Alfreds Futterkiste",
                "Country": "Germany"
            }, {
                "Name": "Berglunds snabbk",
                "Country": "Sweden"
            }, {
                "Name": "Centro comercial Moctezuma",
                "Country": "Mexico"
            }, {
                "Name": "Ernst Handel",
                "Country": "Austria"
            }, {
                "Name": "Alfreds Futterkiste",
                "Country": "Germany"
            }, {
                "Name": "Berglunds snabbk",
                "Country": "Sweden"
            }, {
                "Name": "Centro comercial Moctezuma",
                "Country": "Mexico"
            }, {
                "Name": "Ernst Handel",
                "Country": "Austria"
            }, {
                "Name": "Alfreds Futterkiste",
                "Country": "Germany"
            }, {
                "Name": "Berglunds snabbk",
                "Country": "Sweden"
            }, {
                "Name": "Centro comercial Moctezuma",
                "Country": "Mexico"
            }, {
                "Name": "Ernst Handel",
                "Country": "Austria"
            }, {
                "Name": "Alfreds Futterkiste",
                "Country": "Germany"
            }, {
                "Name": "Berglunds snabbk",
                "Country": "Sweden"
            }, {
                "Name": "Centro comercial Moctezuma",
                "Country": "Mexico"
            }, {
                "Name": "Ernst Handel",
                "Country": "Austria"
            }];

            var tempData = [{
                        "Name": "1",
                        "Country": "test1"
                    }, {
                        "Name": "2",
                        "Country": "test2"
                    }, {
                        "Name": "3",
                        "Country": "test3"
                    }, {
                        "Name": "1",
                        "Country": "test1"
                    }, {
                        "Name": "2",
                        "Country": "test2"
                    }, {
                        "Name": "3",
                        "Country": "test3"
                    }, {
                        "Name": "1",
                        "Country": "test1"
                    }, {
                        "Name": "2",
                        "Country": "test2"
                    }, {
                        "Name": "3",
                        "Country": "test3"
                    }, {
                        "Name": "1",
                        "Country": "test1"
                    }, {
                        "Name": "2",
                        "Country": "test2"
                    }, {
                        "Name": "3",
                        "Country": "test3"
                    }, {
                        "Name": "1",
                        "Country": "test1"
                    }, {
                        "Name": "2",
                        "Country": "test2"
                    }, {
                        "Name": "3",
                        "Country": "test3"
                    }];

          $scope.loadMore = function() {
                $scope.records.push(...tempData);
            }
        });
    </script>

</body>

</html>

那我就用$scope.$apply()吧，项目打包运行报错[$rootScope:inprog] $digest already in progress......说我加了$scope.$apply()，，，所以我到底该不该加？？？

解决办法：加个判断，如果它已经在做脏值检测就不用你多此一举，Prevent error $digest already in progress when calling $scope.$apply()

if(!$scope.$$phase) {
  //$digest or $apply
}

ps:理解Angular中的$apply()以及$digest()

jojo付啾啾
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
angular1 问题总结（持续更新）
Eighteen Z
08-01 873
1.ng-show，ng-hide，ng-if的区别和使用情景。 angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。ng-show和ng-if的表达式值为true的时候，元素会显示，为false的时候会隐藏，ng-hide相反。 但是ng-show和ng-hide控制元素的显示或隐藏是通过改变CSS的display属性值来实现的。即，视...
ng-repeat的使用
youhebuke225的博客
01-21 777
作用 一般用于遍历数据生成模板，我们来看一个例子 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.6.8/angular.min.js"></script> </head> <body>
当无法使用 ng 命令时
zhongjunhaoz的博客
10-15 1590
1. `npm install -g @angular/cli` 当我们安装了全局angular脚手架的时候。 2. 想通过 `ng new` 来创建项目，但是却报错“ng 无法加载文件或没有ng 这个命令”。 3. win10系统搜索 `Windows PowerShell`，选择管理员身份运行。 4. 打开了命令行之后,输入`set-ExecutionPolicy RemoteSigned`。 然后更改权限为A。 5. 最后通过 `get-ExecutionPolicy` 命令查看当前的状态。Remot
解决windows下安装了@angular/cli之后ng命令不存在
weixin_41580988的博客
07-23 3908
解决windows下安装了@angular/cli之后ng命令不存在 错误: ng:command not found，ng不是内部或外部命令 解决方案: 1.执行完 npm install -g @angular/cli 2.如果执行 ng -v 显示ng:command not found，ng不是内部或外部命令,那么你可以找到你的ng.cmd命令所安装的位置 推荐一个神奇everthing.exe,附上链接: https://www.voidtools.com/downloads/ 然后找到你的
ng-repeat使用方法
princekin_wdk的博客
03-29 3887
最简单形式ng-repeat="item in arr" 有时候，我们会遇到数组里有重复元素的情况，这时候，ng-repeat代码不能起作用，原因是Angular默认需要在数组中使用唯一索引，那假如我们的数据确实如此，怎么办呢？可以指定它使用序号作索引，就像这样：ng-repeat="item in arr track by $index" 也可以把多维数组用多层循环的方式迭代出来： $scope.
AngularJS实践之使用ng-repeat中$index的注意点
01-21
后来发现这个Bug是由于在 ng-repeat 中使用了 $index 引发的。 一个简单动作(action)的列表 先来看看一个完整有效的ng-repeat示例。 <ul ng-controller=ListCtrl> <li ng-repeat=item> {{item.name}} <button...
Angular.js中用ng-repeat-start实现自定义显示
10-21
大家都知道Angular.js可以用ng-repeat来显示列表数据，可是如果想要自定义显示数据列表的话ng-repeat就实现不了了，这个时候可以利用ng-repeat-start 和 ng-repeat-end来实现，下面通过本文来详细看看实现的方法吧。
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
12-28
ng-repeat-start与ng-repeat-end时AngularJS（1.2.x）扩展的，使用这两个指令可以灵活控制遍历形式。 例如： index.html <div class=uk-panel ng-controller=UserCtrl> <ul class=uk-list> <li ng-repeat-start=...
Angular ng-repeat 对象和数组遍历实例
09-01
在`Angular ng-repeat`中，遍历数组通常采用以下语法： ```html <label for="" ng-repeat="item in list"> {{item.property}} ``` 这里，`list`是包含多个对象的数组，`item`是当前循环中的对象，`item....
Angular ng-repeat指令实例以及扩展部分
08-31
`Angular ng-repeat`指令是AngularJS中的核心指令之一，用于在HTML模板中循环遍历数组或对象集合，并根据每个元素创建对应的DOM结构。这个指令在实际开发中非常常见，能够帮助开发者快速地构建动态列表或者表格。...
关于AngularJS中ng-repeat不更新视图的解决方法
10-17
今天小编就为大家分享一篇关于AngularJS中ng-repeat不更新视图的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
AngularJs 学习之 ng-repeat-start,ng-repeat-end 指令
最新发布
Andrew_Chenwq的博客
01-28 683
页面： 一条数据占一行，如果分行显示则不容易实现。
angular开发中常遇到的坑
litCabbage的博客
02-27 487
1. UI闪烁问题 众所周知，Angular最大的亮点就是数据的双向绑定。然而，在项目的实际使用过程中，往往会碰到页面闪现出没有被解析的表达式（形如{{app.name}}）。是因为在Angular初始化之前，DOM还没准备就绪，Angular正在计算并替换相应的值。 解决方法 1.1 放弃...
angular1中使用track by优化ng-repeat效率
shidaping的博客
07-12 7673
track by是angular1.2后新加入的。ng-repeat会为每一次元素加上一个hashkey $$hashKey来识别每一个元素，当我们从后端重新获取数据时，即使数据完全一样，但是由于hashKey不一样，angular会删除之前的所有dom，重新生成新的dom。这样效率就会大大降低。可以理解为ng-repeat默认是 track by $$hashKey的。所以，我们应该使用一些不会
angularjs之循环遍历
热门推荐
沐吾
06-08 2万+
angular循环 ng-repeat 和 forEach
Angular表格ng-repeat设置tr样式
weixin_41944332的博客
09-18 852
设置tr统一样式 当获取百分比div宽高后，想将这个值赋给表格的tr，但发现ng-repeat获取数据时，只有第一个tr获取到了赋的值。解决办法： $(document).ready(function(){ //根据id获取div对象 var div1=document.getElementById("guestTimesChart"); //计划...
《我的Angular入坑记》——通过小例子看ng-repeat
皮蛋瘦肉没有肉
04-21 396
为了简单方便一点，笔者这里的数据全部都是在前台硬加上去的，一般项目里的数据都是通过后台抓取的。 Title {{k}} 名称：{{v.name}} 网址：{{v.url}}
angularJS中ng-repeat使用ng-model无法绑定问题
shoushou71的博客
02-17 1901
问题描述：     最近在项目中确实遇到这样的问题，在ng-reapet中如何为ng-model双向绑定呢？因为ng-model是ng-repeat动态生成的，ng-model=”变量”，什么变量，是未知的所以你无法在$scope."变量"取到值，就算取到值也是其中一个值，对ng-repeat下的每一循环绑定的值都会相互污染。确实挺奇怪的。 解决方案：     首先ng-model设置为$p...
angular布局代码
03-31
1. ng-app：定义Angular应用程序的根元素，通常在HTML标签上使用。 2. ng-controller：定义Angular控制器，通常在HTML标签上使用。 3. ng-model：将表单元素的值绑定到作用域变量。 4. ng-repeat：在DOM中重复一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值