AngularJS在表中嵌套ng-repeat
[英]AngularJS nested ng-repeat in table
问题描述
I am new to AngularJs and have come across an issue with Json data with nested arrays. 
我是AngularJs的新手，遇到了嵌套数组的Json数据问题。
I have simplified the code to a simple html doc, this can be found below. 我已将代码简化为简单的html文档，可以在下面找到。
The first property {{HelloMessage}} is working and gets populated with the string value stored in the property HelloMessage, but the ng-repeat is not. 第一个属性{{HelloMessage}}正常工作，并使用存储在属性HelloMessage中的字符串值填充，但ng-repeat无效。
After looking online, I discovered that I in fact had an array within an array, so assumed that I needed to have an ng-repeat within an ng-repeat, but it is not working. 在网上查看后，我发现我实际上在一个数组中有一个数组，因此假设我需要在ng-repeat中包含一个ng-repeat，但它不起作用。 I am quite sure that it is something simple that I have done wrong. 我很确定自己做错了一些简单的事情。
<!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>
No errors are throw in Chrome Console Chrome控制台不会引发任何错误
4 个解决方案
解决方案1
1 已采纳 2017-03-28 08:16:53
Rewrite the ng-repeat as 重写ng-repeat为
<tr ng-repeat="stream in Data[0].Records[0].Users[0].Users">
</tr>
Use 采用
<td>{{stream.Id}}</td>
<td>{{stream.UserId}}</td>
<td>{{stream.DisplayName}}</td>
instead of 代替
<td>{{stream.Id}}</td>
<td>{{stream.User}}</td>
<td>{{stream.Description}}</td>
function myController($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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script> <div ng-app> <div ng-controller="myController"> <h1>{{helloMessage}}</h1> <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> </div>
解决方案2
1 2017-03-28 08:30:16
First you have to define your controller to body level as following. 首先，您必须按照以下步骤将控制器定义为身体水平。
<body ng-controller="myController">
You have defined it as h1 level so it is not accessible. 您已将其定义为h1级别，因此无法访问。
I have made changes in your code please as following. 我已对您的代码进行了如下更改。
<!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>
Hope this will help you. 希望这会帮助你。 thanks 谢谢
解决方案3
0 2017-03-28 08:10:53
It seems that your JSON is full of arrays. 看来您的JSON充满了数组。 It could probably be improved, but there is how you can display it in its current state. 可能会对其进行改进，但是您可以在当前状态下显示它。 You don't need to nest ng-repeat : 您不需要嵌套ng-repeat ：
<tbody>
<tr ng-repeat="user in Data[0].Records[0].Users[0].Users">
<td>{{user.Id}}</td>
...
</tbody>
Working JSFiddle of your code 工作的JSF代码中间
解决方案4
0 2017-03-28 09:34:22
Thank you, thank you all for your help. 谢谢，谢谢大家的帮助。 I have used Geethu Jose answer, but it still did not give me exactly what I was looking for, but after much head scratching I did come up with a solution for my problem. 我已经使用了Geethu Jose的答案，但是它仍然不能完全满足我的需求，但是在head头之后，我确实提出了解决问题的方法。 Instead of using the array placeholders [0] I needed access the arrays themselves at the different levels, so I had to change the code to the following. 除了需要使用数组占位符[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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.