Ошибка: [ngRepeat: dupes] Дубликаты в ретрансляторе не разрешены. Используйте выражение «track by» для указания уникальных ключей

Question

есть ли кто-нибудь, кто может мне помочь, что я должен делать с этим err, я не знаю, что случилось с этой проблемой, я просто хочу отображать json-массив из сервера базы данных в html с использованием углового синтаксиса (ng-repeat), но я получил сообщение об ошибке: Ошибка: [ngRepeat: dupes] Дубликаты в ретрансляторе не разрешены. Используйте выражение «track by» для указания уникальных ключей. Ретранслятор: datateman в datatemans, дубликат ключа: строка: "повторяющееся значение:"

здесь код ..

 <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

acutal проблема описана 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>