Question

是否有人可以帮助我该怎么办这个错误，我不知道这个问题发生了什么，我只是想使用角度语法（ng-repeat）显示从数据库服务器到html的json数组但是我得到了一个错误说错误：[ngRepeat：dupes]不允许在转发器中重复。使用'track by'表达式指定唯一键。 Repeater：datateman in datatemans，Duplicate key：string：“，Duplicate value：”

这是代码..

     <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>

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

1 个答案: