ng-使用重复条目重复重复数据
ng -repeat repeating data with duplicate entries
我试图使用AngularJS ng repeat显示JSON数据,但记录越来越重复。注意:第一次加载页面时,它运行良好。当我尝试重新加载页面时,项目会重复。
这是我的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>
以下是来自web服务的响应的控制台日志数据:
[{"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}]
不确定您的情况是什么,但下面的代码将为您完成
如果能够将index
(即id
)重构为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
,如果无法获取ids
,也可以使用angularjs $index
。
相关文章:
- 从键值结构中获取数据,并将其与AngularJS中ng重复的值进行比较
- ng绑定和ng href问题.ng href未从控制器加载数据
- 如何在ng-reeat中使用ng-switch来编辑JSON API数据
- 从服务器获取数据并在选择控件中使用ng选项无法显示选项
- ng-使用重复条目重复重复数据
- 通过共享服务在两个不同ng应用程序中的控制器之间共享数据
- 使用引导时间选取器时,没有更新数据ng模型值
- 如何在angularjs中按顺序执行多数据ng应用程序
- 使用 ng 模型获取数据时遇到问题
- 在数据更改时更新ng重复
- Angularjs数据ng控制器
- 数据ng在Angular中用不同的标签重复
- AngularJS-$routeProvider和数据ng视图的问题
- 如何修复这个 AngualrJS 数据-ng-init 绑定 - 初学者
- 如何使用数据 ng-repeat获取从 A 到 Z 的索引值
- 请帮忙"数据ng控制器”;不起作用
- Angular未在表行中显示数据.ng重复不起作用
- 如何过滤我的数据?(ng网格)
- 当数据ng模型更改时,ng if不起作用
- 错误加载动态数据ng重复