Question

我有一个列表中的ng-repeat放在表格中。

脚本html代码是这样的：

`<tr ng-repeat="user in users track by $index" ng-class="{'selected':$index == selectedRow}">
                    <td>
                        {{user.FirstName}}
                    </td>
                    <td>
                        {{user.LastName}}
                    </td>
                    <td>
                        {{user.EmailId}}
                    </td>
                    <td>
                        {{user.ContactNumber}}
                    </td>
                    <td>
                        <button type="button" class="btn btn-warning">
                            <span class="glyphicon glyphicon-pencil"></span>
                        </button>
                        <button type="button" class="btn btn-danger">
                            <span class="glyphicon glyphicon-remove"></span>
                        </button>
                    </td>
                </tr>`

并且在角度脚本中，路由被定义为以下：

var routingApp = angular.module('App', []);
routingApp.controller("MovieController", ['$scope', '$http', function ($scope, $http) {

$scope.edit = false;
$scope.error = false;
$scope.success = false;
//TO DO : Below portion to be replaced with ajax call to get list of movies from DB
var users = [
    { "UserId": 1, "FirstName": "user", "LastName": "1", "EmailId": "user1@gmail.com", "ContactNumber": 1234567890, "UserName": "User1", "Password": "Welcome@1" },
    { "UserId": 2, "FirstName": "user", "LastName": "2", "EmailId": "user2_1993@gmail.com", "ContactNumber": 7894612305, "UserName": "User2", "Password": "Welcome@2" },
    { "UserId": 3, "FirstName": "user", "LastName": "3", "EmailId": "user3@gmail.com", "ContactNumber": 1472583690, "UserName": "User3", "Password": "Welcome@3" },
    { "UserId": 4, "FirstName": "user", "LastName": "4", "EmailId": "user4@gmail.com", "ContactNumber": 7531598520, "UserName": "User4", "Password": "Welcome@4" },
    { "UserId": 5, "FirstName": "User", "LastName": "5", "EmailId": "user5@gmail.com", "ContactNumber": 4785961235, "UserName": "user5", "Password": "Welcome@5" }
];
console.log(users); //debugger;
    $scope.users = users;


}]);

这部分工作正常。

但是当我替换静态json数据时;

 var users = [
    { "UserId": 1, "FirstName": "user", "LastName": "1", "EmailId": "user1@gmail.com", "ContactNumber": 1234567890, "UserName": "User1", "Password": "Welcome@1" },
    { "UserId": 2, "FirstName": "user", "LastName": "2", "EmailId": "user2_1993@gmail.com", "ContactNumber": 7894612305, "UserName": "User2", "Password": "Welcome@2" },
    { "UserId": 3, "FirstName": "user", "LastName": "3", "EmailId": "user3@gmail.com", "ContactNumber": 1472583690, "UserName": "User3", "Password": "Welcome@3" },
    { "UserId": 4, "FirstName": "user", "LastName": "4", "EmailId": "user4@gmail.com", "ContactNumber": 7531598520, "UserName": "User4", "Password": "Welcome@4" },
    { "UserId": 5, "FirstName": "User", "LastName": "5", "EmailId": "user5@gmail.com", "ContactNumber": 4785961235, "UserName": "user5", "Password": "Welcome@5" }
];

带

$http.get("http://localhost:82/api/User/GetAllUsers")
.then(function (response) {
    dt = JSON.stringify(response.data);
    $scope.users = dt;
    //console.log(dt);
    //console.log(JSON.parse(dt));
})

它将通过此例外：

`[ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: user in users, Duplicate key: string:", Duplicate value`

但是api的输出与静态json完全相同，实际上我已经从api输出本身复制了json。

即使我尝试删除track by $index但是没有运气。这个问题有什么解决方案吗？

Answer 1

//dont stringify your api response and try this
$scope.users = response.data;

//html
<tr ng-repeat="user in users track by user.UserId" ng-class="{'selected':$index == selectedRow}">

Answer 2

尝试使用JSON.parse代替JSON.stringify，您尝试遍历字符串（JSON.stringify返回字符串）。无论如何，如果数据以JSON格式发回，只需分配数据。

Answer 3

尝试以下代码

 $http.get("http://localhost:82/api/User/GetAllUsers")
.then(function (response) {
dt = JSON.stringify(response.data);
$scope.users = response.data;

})

Answer 4

尝试此操作时不会对响应进行字符串化并通过用户进行操作。

$http.get("http://localhost:82/api/User/GetAllUsers")
.then(function (response) {

$scope.users = response.data;

})

ng-repeat与静态json完美配合但是使用动态json数据触发异常

4 个答案: