您的位置：首页 > 其它

track by与普通in循环区别

2015-08-17 09:56 288 查看 
<divng-repeat="links in slides"><div
ng-repeat="link in links track by $index">{{link.name}}</div></div>


Error: [ngRepeat:dupes]




you can 'track by $index' if your data source has duplicate identifiers

e.g.: $scope.dataSource: [{id:1,name:'one'}, {id:1,name:'one too'}, {id:2,name:'two'}]

you can't iterate this collection while using 'id' as identifier (duplicate id:1).

WON'T WORK:

<element ng-repeat="item.id as item.name for item in dataSource">
// something with item ...
</element>

but you can, if using 'track by $index':

<element ng-repeat="item in dataSource track by $index">
// something with item ...
</element>


这个出错提示具体到的情况，意思是指数组中有2个以上的相同数字。ngRepeat不允许collection中存在两个相同Id的对象

For example: 
item in items
 is equivalent to 
item in items track by $id(item)
. This implies that the DOM elements will be associated by item identity in the array.

对于数字对象来说，它的id就是它自身的值，因此，数组中是不允许存在两个相同的数字的。为了规避这个错误，需要定义自己的track by表达式。

例如：
item in items track by item.id
或者
item in items track by fnCustomId(item)
。嫌麻烦的话，直接拿循环的索引变量$index来用
item in items track by $index


</pre><html><pre name="code" class="html"><div ng-app>
<div ng-controller="test">
<div ng-repeat="links in slides">
<hr/>
<div ng-repeat="link in links track by $index">
{{link}}
</div>
</div>
</div>
</div>

<script>
function test($scope) {
$scope.slides = [
[ 1, 1, 1 ],
[ 4, 5, 6 ],
];
}
</script>
</html>
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航