如何使用ng-repeat来深入JSON

I have been stuck on displaying data with ng-repeat. the only thing I have been able to do is display the one of the two objects. Every Customer can have multiple Users. I am trying to display the Users in a table with there CustomerId. Working plunkr

我一直坚持用ng-repeat来显示数据。我唯一能做的就是显示这两个对象中的一个。每个客户都可以拥有多个用户。我试图将用户显示在具有CustomerId的表中。工作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;

});

2 个解决方案

#1

Since, CustomerId is also a property of User, you could make a list of Users in the controller and then loop them in the table:

由于CustomerId也是用户的属性，您可以在控制器中创建用户列表，然后在表中循环:

  $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);
    }

  }

And then just ng-repeat the users:

然后用ng-repeat用户:

<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>

Here is an updated plunker.

这是一个更新的活塞。

In fact, even if you need a property on the parent Customer part of json, you can add the property to the users array being repeated.

事实上，即使您需要在json的父客户部分上拥有一个属性，您也可以将该属性添加到用户数组中。

Preparing the data for view will often simplify template tricks (like having to build the table with extra ng-repeated elements. IMO, this is preferable.

为视图准备数据通常会简化模板技巧(比如必须使用额外的ng重复元素构建表)。国际海事组织,这是可取的。

#2

There are two possible solutions for this problem, the first one ( rearranging your data in your controller) has already been mentioned in the other answer.

对于这个问题，有两种可能的解决方案，第一种方案(在控制器中重新排列数据)在另一种方案中已经提到。

Another way would be a nested loop which I implemented like this:

另一种方法是嵌套循环，我是这样实现的:

<!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>

This solution is fast and easy to implement and gives you access to both the user and customer. I would still suggest to rebuild your data in your controller most of the time as it keeps your views clean and keeps any real logic in your controller (Check here for an example of that).

该解决方案快速且易于实现，并使您能够访问用户和客户。我仍然建议您在大多数情况下在控制器中重新构建数据，因为它保持视图的清洁，并在控制器中保持任何真正的逻辑(请参阅这里的示例)。

But this example is so simple that you can easily handle it in a nested ng-repeat.

但是这个示例非常简单，您可以轻松地在嵌套的ng-repeat中处理它。

#1