ng -repeat具有重复条目的重复数据 [英] ng -repeat repeating data with duplicate entries

问题描述

我正在尝试使用AngularJS ng重复显示JSON数据，但是记录正在重复.注意:第一次加载页面时，效果很好.当我尝试重新加载页面时，项目会重复.

I'm trying to display a JSON data using AngularJS ng repeat but the records are getting duplicated. Note: It works fine the very first time the page is loaded. When I try to reload the page the items get duplicated.

这是我的JSON数据:

Here is my JSON data:

    [{
    "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代码:

Here is the AngularJS code:

 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>

以下是来自Web服务的响应的控制台日志数据:

Here is the console log data of the response from the web service:

[{"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}]

推荐答案

不确定您的案子是什么，但是下面的代码将为您解决问题

Not sure what your case is, but following code will do the trick for you

如果您能够将 index 即 id 重构为json对象，则可以使用

If you would be able to refactor index i.e id to your json object, you can use track by syntax for the same.

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

It would be better to use your actual data ids instead you can use angularjs $index for the same in case if you would not be able to fetch ids.

这篇关于ng -repeat具有重复条目的重复数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！