解决AngularJS中ng-repeat不更新视图的问题

最新推荐文章于 2023-07-14 15:02:38 发布
最新推荐文章于 2023-07-14 15:02:38 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： angular 文章标签： angular 前端 ng-repeat index
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37477349/article/details/88702200
版权

最近写AngularJS项目中，遇到一个问题，先对数组进行赋值，ng--repeat正常工作，然后对数组进行修改，ng-repeat似乎没有工作，视图没有更新。

原因是ng-repeat会已默认值排序，由于我的数组中的元素有重复，所以ng-repeat没有对重复的元素进行刷新，只要对ng-repeat指定track by就可以了

<tr ng-repeat="selectedCriterias in selectedCriteriasArray track by $index">
用track by $index问题解决。这样ng-repeat把$index作为key

Justice23
关注
专栏目录
关于AngularJS中ng-repeat不更新视图的解决方法
10-17
今天小编就为大家分享一篇关于AngularJS中ng-repeat不更新视图的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Angularjs中ng-repeat的简单实例
10-19
ng-repeat是AngularJS中处理列表和集合数据时不可或缺的一个工具，使得在Web页面上动态展示数据变得非常简单和高效。通过掌握ng-repeat指令，开发者可以在AngularJS应用中创建更加动态和交互性更强的用户界面。
ng-model 数据不更新 及 ng-repeat【ngRepeat:dupes】错误
weixin_30600197的博客
08-09 216
一、ng-include 引入的文件中 ，ng-model 数据不更新 　　例如，$scope.username = “Jones” 。此时，在 ng-include 引入的文件中，直接使用 ng-model="username" 会出现这种情况。 　　原因：ng-include指令创建了一个新的数据范围，它是原始范围的实例 　　解决方法： 　　　　1、可以直接在包含的Html模板中...
angular数据变化 前端视图未更新
weixin_49050598的博客
06-29 874
angular 数据检测机制
angularjs过滤器--filter与ng-repeat配合有奇效
10-20
在介绍AngularJS过滤器-filter与ng-repeat的配合使用时，我们首先需要了解这两个指令在AngularJS框架中所扮演的角色。AngularJS是一个开源的前端框架，由Google支持，广泛用于开发动态Web应用程序。它通过引入双向...
angularjs，ng-repeat循环渲染时，无法获取dom对象.pdf
12-16
在`ng-repeat`中，每当有新项目添加到集合中，AngularJS需要重新执行这个周期的部分工作来确保数据与视图的同步。 在`ng-repeat`循环渲染过程中，直接获取DOM对象可能会遇到困难，因为`ng-repeat`的渲染是动态进行...
angularJs踩坑
最新发布
Anna_lhy的博客
07-14 345
3、如果遇到对数组的编辑，依旧无法利用上面方法解决，其原因是因为该框架的data本身会生成一个rowId，如果rowId没有变化，该条数据并不会更新，因此可以先手动删除该条rowId，然后赋值给一个全新的数组，最后再结合定时器与$diget()将这个全新的数组赋值给绑定的数组，原理：创造新的数组，生成新的rowId。1、采用$scope.$apply()方法，其原理是促使当前页面从根节点开始检查数据，缺点：页面只能使用一次，且性能交差，一般用$digest()代替$apply()
angularjs模型数据改变页面未刷新的解决办法
weixin_38586700的博客
11-15 1365
angularjs模型数据改变页面未刷新的解决办法 在angularjs开发过程中我们发现有时模型数据改变了页面却没有变化，这是因为使用原生Js或者jQuery对模型数据做出更改时，angularjs不能监测到数据的改变，解决办法是 使用angularjs的方法，例如把$.get()改成$http.get()。 使用$scope.apply()手动刷新。 点击带有ng-click指令的按钮时，...
angular 数据改变视图不变的解决方案
alize的博客
07-03 1515
关于angularjs中,数据模型被改变,页面不刷新的解决办法
weixin_39407291的博客
06-24 1585
刚用angularjs时,确实被它的双向数据绑定震住了,但同时没有完合使用angularjs的方法,从而出现数据模型被改变,但页面不能随之更改,需要scope.scope.scope.apply()强制更新数据模型. 原因：实际上出现这种情况,就是因为在angularjs中使用了JS方法产生数据源,看下面代码: var myApp = angular.module("myApp",[]); myA...
angularjs在js代码中改变了model的值，但是页面上没有变化
VITAMIN的博客
07-25 7690
1.场景重现 在controller中我们先默认给定model的值，然后调用了一个外部函数改变这个model的值，页面上没有变化，还是显示默认值。 2.原因分析 AngularJS只会关心在AngularJS的执行上下文中的发生的数据模型(model)的变化(比如，改变数据的代码在$apply()里面)。AngularJS内建的指令也会自动触发$digest循环所以任何数据模型(model)
angularjs数据模型值被改变,页面不刷新的解决办法
木灵的专栏
03-27 8840
在debug的时候发现privitedevices的值有变化，但是页面并没有刷新，这时需要手动刷新下，然后就ok了$scope.devices = privitedevices $scope.$apply();//需要手动刷新
angularJS变量变化时页面视图不更新问题
renkind的博客
01-22 8711
页面视图不更新时，在方法后手动调用$scope.$apply()方法，手动更新视图 举例如下： else if(count==1){  $scope.showImg=dataBase64;  strHead=dataBase64.indexOf('data:image/');  strFoot=dataBase64.indexOf('base64,',strHead)+7;  strV
angular ng-repeat的数据集变化了，但是页面没有变化
风一样的少年
10-09 5159
刚开始用angular，作为一个菜鸟遇到了一个头疼的问题：        ng-repeat的数据集变化了，但是页面没有变化，折腾了半天,才找到解决办法： 就是在你的数据集变化后调用一下     $scope.$apply();     根源还是不懂angular，关于apply的介绍参考大神的文章http://blog.csdn.net/dm_vincent/article/details
更新$scope 时，ng-repeat 不刷新
love4Mario的专栏
08-16 3789
前几天用angularjs 遇到一个大坑，就是在使用ng-repeat 时，用jquery的ajax方法获取服务器数据，再传给$scope时，页面不更新。 搜了好几天，国内的贴子里面都没提到过这种动态刷新，都是传一个常量给$scope.  今天终于在stackoverflow上找到原因，就是在angularjs里面，如果你用了jqueryt的方式ajax， angularjs是发现不了的，自然也
angular JS修改操作select无法绑定回显
热门推荐
归小超博客
05-21 1万+
今天在用angualr写select的时候，当我JS给select数据赋予初始值时，数据双向绑定并没有将初始值赋予select框中，最后找啊找，试啊试，终于找到了一种方法： 利用ng-selected 指令： 我写的是双层循环，在第二层循环的时候，allDataList 中每个对象的id都是有值的，当回显的时候一直失败，也找不到原因，最后利用了ng-selected="project.id == ...
angular执行push操作，页面没有更新
城南蝈蝈
03-19 687
原文链接: https://www.longkui.site/error/angular-push/4354/ 0.问题 每次新增一个对象，执行了下面的操作 this.itemList.push(this.tableCityDataItem) 然后console的结果是可以看出数据进行更新了，但是HTML页面的数据并没有进行更新。 1.解决办法 参考如下代码即可 this.itemList.push(this.tableCityDataItem) this.itemList=this.itemList.sl
AngularJS实战：表格数据展示与ng-repeat解析
在AngularJS中，`ng-repeat`是一个非常关键的指令，它允许我们遍历一个数组或对象，并基于每个元素创建重复的DOM元素。在表格上下文中，这通常用于展示数据库或其他数据源中的记录。以下是一个简单的`ng-repeat`用法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值