我一直坚持用ng-repeat显示数据。我唯一能做的就是显示两个对象中的一个。每个客户都可以拥有多个用户。我试图在CustomerId的表中显示用户。 Working plunkr
app.controller('MainCtrl', function ($scope) {
var json = [
{
"CustomerId": "12xsd-344-fv23", "CompanyName": "ConocoPhillips",
"Address": "1234 Main St", "City": "Redmond", "State": "WA", "Zip": "10999",
"Email": "debra@example.com",
"Users": [
{
"FirstName": "Rudy", "LastName": "Sanchez", "CustomerId": "12xsd-344-fv23", "Customer": null,
"Email": "admin@energy.com", "EmailConfirmed": true, "PasswordHash": "AGtuCXr",
"SecurityStamp": "b0fca140", "PhoneNumber": null, "PhoneNumberConfirmed": false, "TwoFactorEnabled": false,
"LockoutEndDateUtc": null, "LockoutEnabled": false, "AccessFailedCount": 0, "Roles": [], "Claims": [], "Logins": [],
"Id": "49b5", "UserName": "admin"
},
{
"FirstName": "Troy", "LastName": "Benbow", "CustomerId": "12xsd-344-fv23", "Customer": null,
"Email": "tbenbow@yahoo.com", "EmailConfirmed": true, "PasswordHash": "AM8wL+iHaSG",
"SecurityStamp": "14f1483a-2e6f-41da-8307-a6c5945984a9", "PhoneNumber": null, "PhoneNumberConfirmed": false, "TwoFactorEnabled": false,
"LockoutEndDateUtc": null, "LockoutEnabled": true, "AccessFailedCount": 0, "Roles": [], "Claims": [], "Logins": [],
"Id": "9985b820-a45", "UserName": "tbenbow"
}
]
},
];
$scope.customers = json;
});
答案 0 :(得分:2)
由于CustomerId
也是属性User
,您可以在控制器中创建Users
列表,然后在表格中循环它们:
$scope.users = [];
for(var i = 0; i < $scope.customers.length; i++) {
for(var j = 0; j < $scope.customers[i].Users.length; j++) {
//now you have access to customer properties with $scope.customers[i]
var user = $scope.customers[i].Users[j];
//example of adding CompanyName property
user.CompanyName = $scope.customers[i].CompanyName;
//add user to $scope.users
$scope.users.push(user);
}
}
然后只需ng-repeat
users
:
<tr ng-repeat="user in users">
<td>{{user.FirstName}} {{user.LastName}}</td>
<td>{{user.UserName}}</td>
<td>{{user.Email}}</td>
<td>{{user.CustomerId}}</td>
<td>{{user.CustomerName}}</td>
</tr>
实际上,即使您需要Customer
的父json
部分的属性,也可以将该属性添加到正在重复的users
数组中。
为视图准备数据通常会简化模板技巧(比如必须使用额外的ng-repeat
ed元素构建表.IMO,这是首选。
答案 1 :(得分:1)
此问题有两种可能的解决方案,第一种(在控制器中重新排列数据)已在另一个答案中提及。
另一种方法是我实现的嵌套循环:
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css">
<script src="http://code.angularjs.org/1.1.4/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>UserName</th>
<th>Email</th>
<th>CustomerId</th>
</tr>
</thead>
<tbody ng-repeat="customer in customers">
<tr ng-repeat="user in customer.Users">
<td>{{user.FirstName}} {{user.LastName}} {{customer.CustomerId}}</td>
<td>{{user.UserName}}</td>
<td>{{user.Email}}</td>
<td>{{user.CustomerId}}</td>
</tr>
</tbody>
</table>
</body>
</html>
此解决方案快速且易于实施,使您可以同时访问用户和客户。我仍然建议在大多数情况下在控制器中重建数据,因为它可以保持您的视图干净并在控制器中保留任何真实的逻辑(Check here for an example of that)。
但是这个例子非常简单,您可以在嵌套的ng-repeat中轻松处理它。