ng-repeat 中的 track by $index 解决相同的ID的对象

ng-repeat 中的 track by $index 解决相同的ID的对象

 

 ng-repeat="item in resultLists track by $index"

 

 

用ng-repeat指令遍历一个javascript数组，当数组中有重复元素的时候,angularjs会报错,这是因为ng-Repeat不允许collection中存在两个相同Id的对象。

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

// 业务上自己生成唯一的id
item in items track by item.id

//或者直接拿循环的索引变量$index来用
item in items track by $index

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

 

        <div ng-show="cfdata.length == 0" class="hlyw-f-no-data4"></div>
            <div class="hlyw-cf-result charge-info" ng-show="cfdata.length > 0" >
                <div class="hlyw-cf-list box-shadow" ng-repeat="cf in cfdata track by $index" ng-click="showfr(cf)">
                    <div class="hlye-cf-list-all">
                        <div class="hlyw-cf-list-left">
                            <div class="hlyw-cf-customerName" ng-bind="cf.customerName?cf.customerName:''">

                            </div>
                            <div class="hlyw-cf-list-time" ng-bind="cf.trackTime?(cf.trackTime|parseTime):''">

                            </div>
                            <div class="hlyw-cf-list-content" ng-bind="cf.trackContent?cf.trackContent:''">

                            </div>
                            <div class="hlyw-cf-list-imgs" ng-if="cf.imgList.length>0" >
                                <div class="hlyw-cf-list-img" ng-repeat="cfimg in cf.imgList track by $index">
                                    <img ng-src="{{cfimg}}" ng-click="previewImage(cfimg,cf); $event.stopPropagation();" class="hlyw-cf-img">
                                </div>

                            </div>
                            <div class="hlyw-cf-list-address" ng-show="false">
                                <div class="hlyw-cf-address-icon"></div>
                                <div class="hlyw-cf-address-name txt-hidden" ng-bind="cf.trackLocation?cf.trackLocation:''"></div>
                            </div>

                        </div>
                    </div>

                    <div class="hlyw-cf-arrow" ></div>
                </div>

            </div>