Javascript 表中的AngularJS嵌套ng重复
我是AngularJs的新手，在使用嵌套数组的Json数据时遇到了一个问题 我已经将代码简化为一个简单的html文档，可以在下面找到 第一个属性{{HelloMessage}}正在工作，并使用存储在属性HelloMessage中的字符串值填充，但ng repeat没有工作 在网上查看之后，我发现实际上我在一个数组中有一个数组，所以假设我需要在一个ng repeat中有一个ng repeat，但它不起作用。我很确定我做错了很简单的事情Javascript 表中的AngularJS嵌套ng重复,javascript,angularjs,json,Javascript,Angularjs,Json,我是AngularJs的新手，在使用嵌套数组的Json数据时遇到了一个问题 我已经将代码简化为一个简单的html文档，可以在下面找到 第一个属性{{HelloMessage}}正在工作，并使用存储在属性HelloMessage中的字符串值填充，但ng repeat没有工作 在网上查看之后，我发现实际上我在一个数组中有一个数组，所以假设我需要在一个ng repeat中有一个ng repeat，但它不起作用。我很确定我做错了很简单的事情 <!DOCTYPE html> <html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
</head>
<body>
<h1 ng-controller="myController">{{helloMessage}}</h1>
<div>
<table>
<thead>
<tr>
<th>Id</th>
<th>UserId</th>
<th>DisplayName</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stream in Data.Records">
<tr ng-repeat="record in stream.Users">
<td>{{stream.Id}}</td>
<td>{{stream.User}}</td>
<td>
{{stream.Description}}
</td>
<!--<td>
<table>
<tbody>
<tr ng-repeat="b in value">
<td>{{b.user}}</td>
</tr>
</tbody>
</table>
</td>-->
</tr>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script type="text/javascript">
angular.module('app', []).controller('myController',
function ($scope) {
$scope.helloMessage = "Hi";
$scope.Data = [{
Success: true,
ErrorMessage: null,
SuccessMessage: null,
Records: [{
"CreatedBy": "Mickey Mouse",
"CreatedDate": "2015-08-17T13:16:22.713",
"CreatedDateDisplay": "17-08-2015",
"Description": "Test 1",
"Id": 7546798576985769857,
"Name": "Test 1",
"UpdatedBy": "",
"UpdatedDate": null,
"UpdatedDateDisplay": null,
"User": null,
"UserId": 0,
"Users": [{
"Users": [{
"Id": 7546798576985769858,
"UserId": 7546798576985769857,
"DisplayName": "Daffy Duck"
}, {
"Id": 7546798576985769859,
"UserId": 7546798576985769857,
"DisplayName": "Pluto"
}
],
"User": "Bugs Bunny",
"UserId": 7546798576985769857,
"Name": "Test 2",
"Description": "Test 2",
"Id": 7546798576985769857,
"CreatedBy": "Goofy",
"CreatedDate": "2015-08-25T14:03:28.083",
"UpdatedBy": "Porky Pig",
"UpdatedDate": "2017-03-27T08:19:36.077",
"CreatedDateDisplay": "25-08-2015",
"UpdatedDateDisplay": "27-03-2017"
}
]
}
]
}
];
});
</script>
</body>
</html>
{{helloMessage}}
身份证件
用户ID
显示名称
{{stream.Id}
{{stream.User}
{{stream.Description}}
角度.module（'app'，[]）.controller（'myController'，
职能（$范围）{
$scope.hellomemessage=“Hi”；
$scope.Data=[{
成功：没错，
ErrorMessage:null，
成功消息：null，
记录：[{
“CreatedBy”：“米老鼠”，
“CreatedDate”：“2015-08-17T13:16:22.713”，
“CreatedDataDisplay”：“17-08-2015”，
“说明”：“测试1”，
“Id”：7546798576985769857，
“名称”：“测试1”，
“更新人”：“，
“UpdateDate”：null，
“UpdateDateDisplay”：空，
“用户”：空，
“用户ID”：0，
“用户”：[{
“用户”：[{
“Id”：7546798576985769858，
“用户ID”：7546798576985769857，
“DisplayName”：“Daffy Duck”
}, {
“Id”：7546798576985769859，
“用户ID”：7546798576985769857，
“DisplayName”：“冥王星”
}
],
“用户”：“Bugs Bunny”，
“用户ID”：7546798576985769857，
“名称”：“测试2”，
“说明”：“测试2”，
“Id”：7546798576985769857，
“CreatedBy”：“Goofy”，
“CreatedDate”：“2015-08-25T14:03:28.083”，
“更新人”：“肥猪”，
“更新日期”：“2017-03-27T08:19:36.077”，
“CreatedDataDisplay”：“25-08-2015”，
“更新日期显示”：“27-03-2017”
}
]
}
]
}
];
});
Chrome控制台中不会抛出任何错误。您的JSON似乎充满了数组。它可能会得到改进，但您可以在当前状态下显示它。您不需要嵌套
ng repeat<tbody>
<tr ng-repeat="user in Data[0].Records[0].Users[0].Users">
<td>{{user.Id}}</td>
...
</tbody>
{{user.Id}
...
重写ng，并重复如下操作：
<tr ng-repeat="stream in Data[0].Records[0].Users[0].Users">
</tr>
{{helloMessage}}
身份证件
用户ID
显示名称
{{stream.Id}
{stream.UserId}}
{{stream.DisplayName}
<body ng-controller="myController">
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title
</head>
<body ng-controller="myController">
<h1>{{helloMessage}}</h1>
<div>
<table>
<thead>
<tr>
<th>Id</th>
<th>UserId</th>
<th>DisplayName</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stream in Data[0].Records[0].Users[0].Users">
<td>{{stream.Id}}</td>
<td>{{stream.UserId}}</td>
<td>{{stream.DisplayName}}
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script type="text/javascript">
angular.module('app', []).controller('myController',
function ($scope) {
$scope.helloMessage = "Hi";
$scope.Data = [{
Success: true,
ErrorMessage: null,
SuccessMessage: null,
Records: [{
"CreatedBy": "Mickey Mouse",
"CreatedDate": "2015-08-17T13:16:22.713",
"CreatedDateDisplay": "17-08-2015",
"Description": "Test 1",
"Id": 7546798576985769857,
"Name": "Test 1",
"UpdatedBy": "",
"UpdatedDate": null,
"UpdatedDateDisplay": null,
"User": null,
"UserId": 0,
"Users": [{
"Users": [{
"Id": 7546798576985769858,
"UserId": 7546798576985769857,
"DisplayName": "Daffy Duck"
}, {
"Id": 7546798576985769859,
"UserId": 7546798576985769857,
"DisplayName": "Pluto"
}],
"User": "Bugs Bunny",
"UserId": 7546798576985769857,
"Name": "Test 2",
"Description": "Test 2",
"Id": 7546798576985769857,
"CreatedBy": "Goofy",
"CreatedDate": "2015-08-25T14:03:28.083",
"UpdatedBy": "Porky Pig",
"UpdatedDate": "2017-03-27T08:19:36.077",
"CreatedDateDisplay": "25-08-2015",
"UpdatedDateDisplay": "27-03-2017"
}]
}]
}];
});
</script>
</html>
<body ng-controller="myController">
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title
</head>
<body ng-controller="myController">
<h1>{{helloMessage}}</h1>
<div>
<table>
<thead>
<tr>
<th>Id</th>
<th>UserId</th>
<th>DisplayName</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stream in Data[0].Records[0].Users[0].Users">
<td>{{stream.Id}}</td>
<td>{{stream.UserId}}</td>
<td>{{stream.DisplayName}}
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script type="text/javascript">
angular.module('app', []).controller('myController',
function ($scope) {
$scope.helloMessage = "Hi";
$scope.Data = [{
Success: true,
ErrorMessage: null,
SuccessMessage: null,
Records: [{
"CreatedBy": "Mickey Mouse",
"CreatedDate": "2015-08-17T13:16:22.713",
"CreatedDateDisplay": "17-08-2015",
"Description": "Test 1",
"Id": 7546798576985769857,
"Name": "Test 1",
"UpdatedBy": "",
"UpdatedDate": null,
"UpdatedDateDisplay": null,
"User": null,
"UserId": 0,
"Users": [{
"Users": [{
"Id": 7546798576985769858,
"UserId": 7546798576985769857,
"DisplayName": "Daffy Duck"
}, {
"Id": 7546798576985769859,
"UserId": 7546798576985769857,
"DisplayName": "Pluto"
}],
"User": "Bugs Bunny",
"UserId": 7546798576985769857,
"Name": "Test 2",
"Description": "Test 2",
"Id": 7546798576985769857,
"CreatedBy": "Goofy",
"CreatedDate": "2015-08-25T14:03:28.083",
"UpdatedBy": "Porky Pig",
"UpdatedDate": "2017-03-27T08:19:36.077",
"CreatedDateDisplay": "25-08-2015",
"UpdatedDateDisplay": "27-03-2017"
}]
}]
}];
});
</script>
</html>
谢谢，谢谢大家的帮助。我使用了Geethu Jose的答案，但它仍然没有给出我想要的确切答案，但经过反复思考，我确实找到了解决问题的方法。我需要在不同级别访问数组本身，而不是使用数组占位符[0]，因此我必须将代码更改为以下内容
<div ng-app>
<div ng-controller="myController">
<h1>{{helloMessage}}</h1>
<table>
<tbody>
<tr ng-repeat="data in Data">
<td>
<table ng-repeat="records in data">
<thead>
<tr>
<th>UserId</th>
<th>User</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{records.UserId}}</td>
<td>{{records.User}}</td>
<td>{{records.Name}}</td>
<td>
<table>
<thead>
<tr>
<th>Id</th>
<th>UserId</th>
<th>DisplayName</th>
</tr>
</thead>
<tr ng-repeat="streamUser in records.Users">
<td>{{streamUser.Id}}</td>
<td>{{streamUser.UserId}}</td>
<td>{{streamUser.DisplayName}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
{{helloMessage}}
用户ID
使用者
名称
{{records.UserId}
{{records.User}
{{records.Name}
身份证件
用户ID
显示名称