2016-05-12 3 views
-1

Я пытаюсь отобразить данные JSON с использованием AngularJS ng repeat, но записи дублируются. Примечание: Он отлично работает в первый раз, когда страница загружается. Когда я пытаюсь перезагрузить страницу, элементы дублируются.ng -repeat повторяющиеся данные с повторяющимися записями

Вот мой JSON данные:

[{ 
    "EmployeeName": "Jishnu", 
    "CategoryId": 0, 
    "Points": 76, 
    "DateAdded": "/Date(-62135596800000)/", 
    "DateModified": "/Date(-62135596800000)/", 
    "Id": 0 
}, { 
    "EmployeeName": "Sini", 
    "CategoryId": 0, 
    "Points": 56, 
    "DateAdded": "/Date(-62135596800000)/", 
    "DateModified": "/Date(-62135596800000)/", 
    "Id": 0 
}, { 
    "EmployeeName": "Abhilash", 
    "CategoryId": 0, 
    "Points": 12, 
    "DateAdded": "/Date(-62135596800000)/", 
    "DateModified": "/Date(-62135596800000)/", 
    "Id": 0 
}, { 
    "EmployeeName": "Abhilash", 
    "CategoryId": 0, 
    "Points": 10, 
    "DateAdded": "/Date(-62135596800000)/", 
    "DateModified": "/Date(-62135596800000)/", 
    "Id": 0 
}, { 
    "EmployeeName": "abhila", 
    "CategoryId": 0, 
    "Points": 6, 
    "DateAdded": "/Date(-62135596800000)/", 
    "DateModified": "/Date(-62135596800000)/", 
    "Id": 0 
}, { 
    "EmployeeName": "Ajay ", 
    "CategoryId": 0, 
    "Points": 5, 
    "DateAdded": "/Date(-62135596800000)/", 
    "DateModified": "/Date(-62135596800000)/", 
    "Id": 0 
}, { 
    "EmployeeName": "Abel", 
    "CategoryId": 0, 
    "Points": 4, 
    "DateAdded": "/Date(-62135596800000)/", 
    "DateModified": "/Date(-62135596800000)/", 
    "Id": 0 
}, { 
    "EmployeeName": "ABDUL", 
    "CategoryId": 0, 
    "Points": 3, 
    "DateAdded": "/Date(-62135596800000)/", 
    "DateModified": "/Date(-62135596800000)/", 
    "Id": 0 
}, { 
    "EmployeeName": "Administrator", 
    "CategoryId": 0, 
    "Points": 2, 
    "DateAdded": "/Date(-62135596800000)/", 
    "DateModified": "/Date(-62135596800000)/", 
    "Id": 0 
}, { 
    "EmployeeName": "ABI", 
    "CategoryId": 0, 
    "Points": 1, 
    "DateAdded": "/Date(-62135596800000)/", 
    "DateModified": "/Date(-62135596800000)/", 
    "Id": 0 
}] 

Вот код AngularJS:

angular.module('myApp', []) 
.controller('ReportCtrl', ['$scope', '$http', '$window', function($scope, $http, $window) { 

    $scope.employeePoints = []; 
    $scope.searchText = []; 


    // $http starts here 

    $http({ 
      // set the parameter for request 
      method: 'POST', 
      url: 'Report/GetEmployeePoints', 
      headers: { 
       'Content-Type': 'application/json; charset=utf-8' 
      }, 
      data: {} 
     }) 
     .then(function(resp) { 

       // Success callback -- starts here 
       $scope.employeePoints = resp.data.response; 

      }, 
      function(error) { 
       // Error callback 
      }); 



}]); 

Вот HTML код:

<tr ng-repeat="point in employeePoints"> 
    <td> 
     <span class="name">{{point.EmployeeName}}</span> 
    </td> 
    <td class="hidden-phone"> 
     {{point.Points}} 
    </td> 
</tr> 

Здесь бревенчатые консоли данные ответ веб-службы:

[{"EmployeeName":"Jishnu","CategoryId":0,"Points":76,"DateAdded":"/Date(-62135596800000)/","DateModified":"/Date(-62135596800000)/","Id":280},{"EmployeeName":"Sini","CategoryId":0,"Points":56,"DateAdded":"/Date(-62135596800000)/","DateModified":"/Date(-62135596800000)/","Id":78},{"EmployeeName":"Abhilash","CategoryId":0,"Points":12,"DateAdded":"/Date(-62135596800000)/","DateModified":"/Date(-62135596800000)/","Id":100},{"EmployeeName":"Abhilash","CategoryId":0,"Points":10,"DateAdded":"/Date(-62135596800000)/","DateModified":"/Date(-62135596800000)/","Id":72},{"EmployeeName":"abhila","CategoryId":0,"Points":6,"DateAdded":"/Date(-62135596800000)/","DateModified":"/Date(-62135596800000)/","Id":323},{"EmployeeName":"Ajay ","CategoryId":0,"Points":5,"DateAdded":"/Date(-62135596800000)/","DateModified":"/Date(-62135596800000)/","Id":97},{"EmployeeName":"Abel","CategoryId":0,"Points":4,"DateAdded":"/Date(-62135596800000)/","DateModified":"/Date(-62135596800000)/","Id":297},{"EmployeeName":"ABDUL","CategoryId":0,"Points":3,"DateAdded":"/Date(-62135596800000)/","DateModified":"/Date(-62135596800000)/","Id":14},{"EmployeeName":"Administrator","CategoryId":0,"Points":2,"DateAdded":"/Date(-62135596800000)/","DateModified":"/Date(-62135596800000)/","Id":1},{"EmployeeName":"ABI","CategoryId":0,"Points":1,"DateAdded":"/Date(-62135596800000)/","DateModified":"/Date(-62135596800000)/","Id":178}] 
+0

Где вы загружаете данные? Он локально хранится? – devqon

+0

Можете ли вы создать рабочую демонстрацию? – niyasc

+0

@devqon Я получаю данные из веб-службы. Я проверил его дважды, не повторял записей – iJade

ответ

0

Не уверен, что ваш случай, но следующий код будет делать трюк для вас

Если вы смогли бы реорганизовать indexid т.е. к объекту JSon, вы можете использовать track by синтаксис для того же.

<tr ng-repeat="point in employeePoints track by point.id"> 
    <td> 
     <span class="name">{{point.EmployeeName}}</span> 
    </td> 
    <td class="hidden-phone"> 
     {{point.Points}} 
    </td> 
</tr> 

может сделать

ng-repeat="point in employeePoints track by $index" 

Было бы лучше использовать фактические данные ids вместо этого вы можете использовать angularjs $index для того же в случае, если вы не смогли бы принести ids.

+0

должен указывать point.id как индекс строки. или это могут быть идентификаторы пользователей в случайном уникальном порядке? – iJade

+0

Да, вероятно, 'point.id' будет вашим фактическим' employeid' из db/service, а '$ index' будет индексом строки внутри' ng-repeat'! –

+0

все еще не работает.Это все еще повторяется. У меня есть 10 элементов для отображения. Но каждый элемент повторяется 10 раз. Итак, отображается всего 100 элементов. – iJade

Смежные вопросы