angular ng-repeat 命令 数组 重复值 出错

最新推荐文章于 2020-01-15 17:00:33 发布
原创 最新推荐文章于 2020-01-15 17:00:33 发布 · 886 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#angular #数组 #重复值 #出错

在使用Angular 1.x的ng-repeat指令时遇到数组含有重复值的问题，文章介绍了一个简单的解决方案：通过添加track by $index确保即使数组元素重复也能正确渲染。

在调试bug的时候惊奇的发现angular 1 中的ng-repeat 命令当数组中有重复值的时候竟然出错了。数组中出现重复值那是经常会发生的，本以为angular的ng-repeat命令应该是默认支持重复值的啊。但是事实上不支持，当数组中有重复值可以添加track by $index 来解决。例如

<p ng-repeat="value in [6,6] track by $index">{{value}}</p>
Angular性能优化
归小超博客
02-28 4833
优化Angular应用的性能 MVVM框架的性能，其实就取决于几个因素： 监控的个数 数据变更检测与绑定的方式 索引的性能 数据的大小 数据的结构 我们要优化Angular项目的性能，也需要从这几个方面入手。 减少监控值的个数 监控值的个数怎么减少呢？ 考虑极端情况，在不引入Angular的时候，监控的个数是为0的，每当我们有需要绑定的数据项，就产生了监控值。 我们注意到，Angular里面使...
Angularjs 1.x 学习笔记
王扬扬的博客
05-02 1156
一，引入百度CDN：&lt;script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"&gt;&lt;/script&gt;引入参考地址：http://www.angularjs.net.cn/download/二，AngularJS 指令当网页加载完毕，AngularJS 自动开启。ng-app 指令告诉 Ang...
ng-repeat报错
kingov
06-15 529
报错信息 angular.min.js:sourcemap:118 Error: [ngRepeat:dupes] http://errors.angularjs.org/1.5.8/ngRepeat/dupes?p0=k%20in%20arr&amp;p1=number%3A1&amp;p2=1 at angular.min.js:sourcemap:6 at angula...
AngularJs ng-repeat解决循环对象出现重复项报错的问题
weixin_30498921的博客
12-28 353
问题：ng-repeat 的循环对象是不能出现重复项的，所以如果有重复的就会报错，应该是 key value的问题吧，不是很了解内部运行机制；经过查询发现 在 循环后面加上track by $index 就会解决问题，也就可以有重复对象了 报错： 划重点 解决办法：加上track by $index <ul> &lt...
ng-repeat 的重复问题
weixin_33766805的博客
03-17 229
如果ng-repeat绑定的数组中元素有重复， 如 $scope.data = [1,2,2] ng-repeat="value in data"  //这种写法就会报错，ngRepeat:dupes 可以通过 ng-repeat="value in data track by $index" 这种方式来解决   但是如果引用了 ace的编辑组件，将编辑组件放到ng-repeat中就会报错，不能有...
angular ng-repeat重复数据遍历的报错
归小超博客
01-15 7018
<div ng-repeat="value in [name, name,name,name] "></div> 今天在用angular指令遍历一个javascript数组，当数组中有重复元素的时候,angular会报错,这是因为ng-repeat不允许collection（收集）中存在两个相同Id的对象。 查了一些资料，原来对于数字或者字符串等基本数据类型来说，每个元素...
ng-repeat循环数组，数组内容相同时报错及解决
你若盛开
10-27 1247
报错信息： "Error: [ngRepeat:dupes] http://errors.angularjs.org/1.6.2/ngRepeat/dupes?p0=projectFeaturesItem%20in%20projectFeaturesData&p1=string%3A%E5%A4%A7%E6%95%B0%E6%8D%AE&p2=%E5%A4%A7%E6%95%B0%E6%8D%A
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
10-20
在上述代码中，即使数组中的值完全相同，每个重复的元素也通过其位置索引来区分，从而避免了ng-repeat的重复错误。 值得注意的是，错误提示“[ngRepeat:dupes]Duplicates in a repeater are not allowed”中提到的...
AngularJS递归指令实现Tree View效果示例
11-29
在上述例子中，数据是一个JSON数组，其中每个元素代表树的一个节点。每个节点包含`id`（唯一标识符）、`pid`（父节点ID）和`name`（节点名称），并且可能有一个`children`属性，用于存储其子节点。这样的数据结构...
AngulaJs-1.4.1
01-30
3. **指令系统**：AngularJS通过自定义HTML指令扩展了DOM的功能，例如ng-repeat用于循环渲染列表，ng-if用于条件渲染，ng-click用于响应用户点击事件等。这些指令使HTML更加语义化，增强了代码的可读性。 4. **模块...
关于AngularJS中ng-repeat不更新视图的解决方法
10-17
今天小编就为大家分享一篇关于AngularJS中ng-repeat不更新视图的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
angularJS中repeat数据不能出现重复项解决
littlebearGreat——宁静致远
01-15 2255
angularJS中repeat的数组数据不能出现重复项， 代码本应该是这样的：解决方法：     在" x in attr "后面直接加上" track by $index "即可。 改过的代码如下：
使用ng-repeat循环数据重新渲染问题
qq_29800403的博客
10-08 479
实现级联的下拉列表时，在指令中用ng-repeat循环数据后。实现数据改变后下拉列表重新渲染使用$apply scope.$apply(function(){ scope.three=scope.three1[0];//在这里修改要循环的数据 });
《Angular之ES6语法实现数组去重》
杨晓风 迷迭香的记忆
07-31 3210
前言：         我希望我的希望不再是希望 正文：       实现去重的主人翁-----set和Array.from            set是一种新的数据结构，它可以接收一个数组或者是类数组对象，自动去重其中的重复项目。           1.在ts中： constructor() { let arr = ['杨晓风','杨晓风','linda','linda...
angular1坑之ng-repeat
DreamFJ的博客
09-10 974
功能：有一个页面，输入查询条件，点击查询按钮后从后台返回数据并显示在页面的表格中，并在页面滚动到最下面时实现下拉加载。 下拉加载什么的前面的博客已经讲过了，这里不再讲了，这里主要是记录bug问题，在从后台返回数据并成功加到数组后面了，但是页面上并没有渲染出来，好怀念vue.js的v-for啊啊啊啊啊，然后就去上网找填坑的方法，说是要用$scope.$apply();好像跟什么脏值检测有关，ok，...
angularJS-1:ng-repeat用法
MouSo的博客
04-11 1229
直接撸代码： 列表的增加，删除操作，采用angular 的ng-repeat循环输出列表项<!doctype html> <html ng-app> <head> <meta charset="utf-8"> <title>ng-repeat directive</title> </head> <body> <table ng-controller="CartController"
angular循环ng-repeat次数限制
Eighteen Z
04-10 2784
&amp;lt;tr ng-repeat=&quot;(x, y) in (program | limitTo : 100) track by $index&quot;&amp;lt;/tr&amp;gt; (program | limitTo : 100) 是限制循环次数。可自己更改 track by $index是为了让数组重复元素照常循环。...
ng-repeat重复元素问题
编程之路
08-07 760
Title <!-- ng-repeat解决元素重复: 语法: ng-repeat="index in myScope track by $index " --> var app = angular.module('myApp',[]); app.contr
angular1中使用track by优化ng-repeat效率
shidaping的博客
07-12 7756
track by是angular1.2后新加入的。ng-repeat会为每一次元素加上一个hashkey $$hashKey来识别每一个元素，当我们从后端重新获取数据时，即使数据完全一样，但是由于hashKey不一样，angular会删除之前的所有dom，重新生成新的dom。这样效率就会大大降低。可以理解为ng-repeat默认是 track by $$hashKey的。所以，我们应该使用一些不会
/** * Created by wupeng5 on 2016/5/9. */ var app = angular.module("app",['ui.router','oc.lazyLoad','tableKillModule','selectModule',"select2Module"]).config(function($stateProvider,$controllerProvider,$compileProvider,$filterProvider,$provide,$urlRouterProvider,$httpProvider){ $urlRouterProvider.otherwise('login'); //引入$stateProvider对象，为动态路由做准备 app.register = { stateProvider:$stateProvider } //$locationProvider.html5Mode(true); $httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'; $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'; $httpProvider.defaults.headers.common["Accept"] = 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8'; $httpProvider.defaults.headers.post['X-Requested-With'] = 'XMLHttpRequest'; $httpProvider.defaults.transformRequest = [function(data) { /** * The workhorse; converts an object to x-www-form-urlencoded serialization. * @param {Object} obj * @return {String} */ var param = function(obj) { var query = ''; var name, value, fullSubName, subName, subValue, innerObj, i; for (name in obj) { value = obj[name]; if (value instanceof Array) { for (i = 0; i < value.length; ++i) { subValue = value[i]; fullSubName = name + '[' + i + ']'; innerObj = {}; innerObj[fullSubName] = subValue; query += param(innerObj) + '&'; } } else if (value instanceof Object) { for (subName in value) { subValue = value[subName]; fullSubName = name + '[' + subName + ']'; innerObj = {}; innerObj[fullSubName] = subValue; query += param(innerObj) + '&'; } } else if (value !== undefined && value !== null) { query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&'; } } return query.length ? query.substr(0, query.length - 1) : query; }; return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data; }]; //配合nginx处理本地开发, 服务器调式的问题(接口是跨域的) $httpProvider.interceptors.push(function($q){ return { 'request':function(config){ if(config.url.indexOf('html') == -1){ config.url = "" + config.url; } return config || $q.when(config); } } }); //注销RootScope上面的广播事件 //var deregister = $rootScope.$on("rootEvent", function(event,data) { // //}); // //$scope.$on('$destory', function() { // deregister(); // 退订事件 //}); //注册$onRootScope方法，并在执行完毕后直接销毁, 防止内存溢出 $provide.decorator('$rootScope',['$delegate',function($delegate){ Object.defineProperty($delegate.constructor.prototype,'$onRootScope',{ value:function(name,listener){ var unsubscribe = $delegate.$on(name,listener); this.$on('$destroy',unsubscribe); }, enumerable:false }); return $delegate; }]) //使用,不需要手动去销毁这个事件 //$scope.$onRootScope("key",function(){ // console.log("get key"); //}) //$rootScope.$broadcast("key",{name:1}); }); app.factory('timestampMarker', [function() { return { request: function(config) { config.requestTimestamp = new Date().getTime(); return config; }, response: function(response) { response.config.responseTimestamp = new Date().getTime(); return response; } }; }]); app.config(['$httpProvider', function($httpProvider) { $httpProvider.interceptors.push('timestampMarker'); }]); //$http.get('xxxx').then(function(response) { // var time = response.config.responseTimestamp - response.config.requestTimestamp; // console.log('The request took ' + (time / 1000) + ' seconds.'); //}); //当路由变化的时候触发 app.run(function($rootScope,$templateCache) { $rootScope.isLogin = true; $rootScope.loginStyle = ""; $rootScope.$on('$stateChangeStart', function (event, current, previous) { if(current.name != "login" && $rootScope.currentState != current.name){ // console.log($rootScope.currentState); $rootScope.currentState = current.name; } //清理所有template缓存 if (typeof(current) !== 'undefined'){ $templateCache.removeAll(); } $rootScope.currentName = current.name; if($rootScope.currentName == "login"){ $rootScope.isLogin = false; $rootScope.loginStyle = "login"; $rootScope.col = ""; }else{ $rootScope.isLogin = true; $rootScope.loginStyle = ""; } }); });代码审计一下
最新发布
08-23
问题：未使用track by的ng-repeat，可能导致重复渲染 ```html <!-- 不推荐 --> <li ng-repeat="item in items">{{ item.name }} ``` 修复：使用track by ```html <li ng-repeat="item in items track by ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值