错误：[ngRepeat:dupes] 不允许在转发器中重复。使用“track by”表达式指定唯一键

Question

有没有人可以帮助我如何处理这个错误，我不知道这个问题发生了什么，我只想使用角度语法（ng-repeat）显示从数据库服务器到 html 的 json 数组，但我得到了一个错误说 Error: [ngRepeat:dupes] 不允许在转发器中重复。使用“track by”表达式指定唯一键。中继器：datatemans中的datateman，重复键：字符串："，重复值："

这里是代码..

     <div class="bar bar-header">
    <button class="button button-icon icon ion-navicon"></button>
    <div class="h1 title">Data Teman</div>
    <button class="button button-clear button-positive">LogOut</button>
  </div>

<ion-view>
    <ion-content padding="false" class="has-header">
        <ion-refresher
            pulling-text="Pull to refresh..."
            on-refresh="showData()">
          </ion-refresher>
        <ion-list show-Delete = "data.showDelete" show-Reorder = "data.showReorder">
            <ion-item class="item-avatar item-icon-right" ng-repeat="datateman in datatemans" type="item-text-wrap" href="#/tab/teman/{{datateman.id}}">
                <img ng-src="{{datateman.icon}}">
                <i class="icon ion-ios7-arrow-right"></i>
                <h2>{{datateman.username}}
                    <br> 
                    <font size="2" color="gray" >Spesialis : {{datateman.password}}</font>
                </h2>
                <ion-delete-button class="ion-minus-circled" ng-click="delete(datateman);"></ion-delete-button>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

这是我获取 json 数组的代码..

.factory('temanService', function($http) {
    var baseUrl = 'http://dwellingtime.net23.net/DwellingTime/';
    return {
        getAll: function() {
            return $http.get(baseUrl+'select.php');
        },
        getId: function (temanId){
            return $http.get(baseUrl+'select_id.php?id='+temanId); 
        },
        create: function (datateman){
            return $http.post(baseUrl+'insert.php',datateman,{
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8;'
                }
            });
        },
        update: function (datateman){
            return $http.post(baseUrl+'update.php',datateman,{
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8;'
                }
            });
        },
        delete: function  (id){
            return $http.get(baseUrl+'delete.php?id='+id);
        }
    };

});

Answer 1

具体问题描述here

AngularJS 不允许在 ng-repeat 指令中重复。这意味着如果您尝试执行以下操作，您将收到错误消息。

<div ng-repeat="item in [a,a,a]">

不过，稍微修改一下上面的代码，定义一个索引来判断唯一性，

<div ng-repeat="item in [a,a,a] track by $index">

将您的ng-repeat="datateman in datatemans" 替换为ng-repeat="datateman in datatemans track by $index"

html

<div class="bar bar-header">
    <button class="button button-icon icon ion-navicon"></button>
    <div class="h1 title">Data Teman</div>
    <button class="button button-clear button-positive">LogOut</button>
</div>
<ion-view>
    <ion-content padding="false" class="has-header">
        <ion-refresher pulling-text="Pull to refresh..." on-refresh="showData()">
        </ion-refresher>
        <ion-list show-Delete="data.showDelete" show-Reorder="data.showReorder">
            <ion-item class="item-avatar item-icon-right" ng-repeat="datateman in datatemans track by $index" type="item-text-wrap" href="#/tab/teman/{{datateman.id}}">
                <img ng-src="{{datateman.icon}}">
                <i class="icon ion-ios7-arrow-right"></i>
                <h2>{{datateman.username}}
                   <br> 
                     <font size="2" color="gray" >Spesialis : {datateman.password}}</font>
                </h2>
                <ion-delete-button class="ion-minus-circled" ng-click="delete(datateman);"></ion-delete-button>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>