AngularJS在表中嵌套ng-repeat
[英]AngularJS nested ng-repeat in table
问题描述
我是AngularJs的新手，遇到了嵌套数组的Json数据问题。
我已将代码简化为简单的html文档，可以在下面找到。
第一个属性{{HelloMessage}}正常工作，并使用存储在属性HelloMessage中的字符串值填充，但ng-repeat无效。
在网上查看后，我发现我实际上在一个数组中有一个数组，因此假设我需要在ng-repeat中包含一个ng-repeat，但它不起作用。 我很确定自己做错了一些简单的事情。
<!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>
Chrome控制台不会引发任何错误
4 个解决方案
解决方案1
1 已采纳 2017-03-28 08:16:53
重写ng-repeat为
<tr ng-repeat="stream in Data[0].Records[0].Users[0].Users">
</tr>
采用
<td>{{stream.Id}}</td>
<td>{{stream.UserId}}</td>
<td>{{stream.DisplayName}}</td>
代替
<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
首先，您必须按照以下步骤将控制器定义为身体水平。
<body ng-controller="myController">
您已将其定义为h1级别，因此无法访问。
我已对您的代码进行了如下更改。
<!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>
希望这会帮助你。 谢谢
解决方案3
0 2017-03-28 08:10:53
看来您的JSON充满了数组。 可能会对其进行改进，但是您可以在当前状态下显示它。 您不需要嵌套ng-repeat ：
<tbody>
<tr ng-repeat="user in Data[0].Records[0].Users[0].Users">
<td>{{user.Id}}</td>
...
</tbody>
工作的JSF代码中间
解决方案4
0 2017-03-28 09:34:22
谢谢，谢谢大家的帮助。 我已经使用了Geethu Jose的答案，但是它仍然不能完全满足我的需求，但是在head头之后，我确实提出了解决问题的方法。 除了需要使用数组占位符[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>
AngularJS-表的嵌套ng-repeat
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.